Alignement croisé du centre div du navigateur en utilisant CSS

Quelle est la manière la plus simple d'aligner un div dont la position est relative horizontalement et verticalement en utilisant CSS? La largeur et la hauteur de la div est inconnue, c'est-à-dire qu'elle devrait fonctionner pour toutes les dimensions div et dans tous les principaux navigateurs. Je veux dire l'alignement du centre.Alignement croisé du centre div du navigateur en utilisant CSS

Je pensais que faire l'alignement horizontal à l'aide:

margin-left: auto; 
margin-right: auto;

comme je l'ai fait here.

Est-ce une bonne solution pour l'alignement horizontal?

Comment est-ce que je pourrais faire l'alignement vertical?

Source

2010-05-29 Misha Moroshko

Lorsque vous dites alignement, il n'est pas clair avec ce que vous souhaitez aligner la div. Voulez-vous dire centre de la div? –

Voulez-vous dire aligner verticalement div au centre – Starx

Désolé, oui, je veux dire l'alignement du centre. –

Le centrage horizontal n'est possible que si l'élément width est connu, sinon le navigateur ne peut pas savoir par où commencer et se terminer.

#content { 
    width: 300px; 
    margin: 0 auto; 
}

Ceci est parfaitement compatible avec les navigateurs.

Le centrage vertical n'est possible que si l'élément est positionné de manière absolue et a un height connu. Le positionnement absolu va cependant casser margin: 0 auto; donc vous devez aborder cela différemment. Vous devez définir son top et left-50% et la margin-top et margin-left à la moitié négative de son width et height respectivement.

Voici un exemple copy'n'paste'n'runnable:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2935404</title> 
    </head> 
    <style> 
     #content { 
      position: absolute; 
      width: 300px; 
      height: 200px; 
      top: 50%; 
      left: 50%; 
      margin-left: -150px; /* Negative half of width. */ 
      margin-top: -100px; /* Negative half of height. */ 
      border: 1px solid #000; 
     } 
    </style> 
    <body> 
     <div id="content"> 
      content 
     </div> 
    </body> 
</html>

Cela dit, le centrage vertical est généralement rarement appliquée dans le monde réel.

Si la largeur et la hauteur sont vraiment inconnus à l'avance, alors vous aurez besoin de saisir Javascript/jQuery pour définir les valeurs margin-left et margin-top et vivre avec le fait que le client va voir le div être rapidement déplacé pendant le chargement de la page, qui pourrait provoquer un "wtf?" expérience.

Source

2010-05-29 14:47:26 BalusC

Notez que vous devez exécuter IE en mode Standards pour que cela fonctionne (en mode Quirks, vous ' ll faut utiliser 'text-align: center' sur l'élément parent pour centrer un div horizontalement). –

Le mode Quirks n'est jamais une option pour les pages Web modernes, cela ne vaut donc pas la peine d'être pris en compte. – Rob

@Rob: bien que je déteste commencer une guerre de flammes à ce sujet (personne ne meurt du mode Quirks), j'ai dû utiliser le mode Quirks dans une application web pour utiliser le [border-box box] (http: // www .quirksmode.org/css/box.html) dans IE. –

"Le centrage vertical n'est possible que si l'élément est positionné de manière absolue et a une hauteur connue." - Cette déclaration n'est pas exactement correcte.

Vous pouvez essayer d'utiliser display:inline-block; et sa possibilité d'être aligné verticalement dans la boîte de son parent. Cette technique vous permet d'aligner un élément sans connaître sa hauteur et sa largeur, bien que cela nécessite que vous connaissiez au moins la hauteur des parents.

Si votre code HTML est ceci;

<div id="container"> 
    <div id="aligned-middle" class="inline-block">Middleman</div> 
    <div class="strut inline-block">&nbsp;</div> 
</div>

Et votre CSS est:

#container { 
    /* essential for alignment */ 
    height:300px; 
    line-height:300px; 
    text-align:center; 
    /* decoration */ 
    background:#eee; 
} 
    #aligned-middle { 
     /* essential for alignment */ 
     vertical-align:middle; 
     /* decoration */ 
     background:#ccc; 
     /* perhaps, reapply inherited values, so your content is styled properly */ 
     line-height:1.5; 
     text-align:left; 
    } 
    /* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */ 
    #container .strut { 
     /* parent's height */ 
     height:300px; 
    } 
.inline-block { 
    display:inline-block; 
    *display:inline;/* for IE < 8 */ 
    *zoom:1;/* for IE < 8 */ 
}

Puis #-milieu aligné sera centré dans #container. C'est l'utilisation la plus simple de cette technique, mais c'est une bonne chose à connaître.

Les règles marquées d'un "/ * pour IE < 8 * /" doivent être placées dans une feuille de style séparée, au moyen de commentaires conditionnels.

Vous pouvez voir un exemple concret de ce ici: http://jsfiddle.net/UXKcA/3/

modifier: (cet extrait particulier testé dans IE6 et FF3.6, mais je l'utilise beaucoup cela, il est assez cross-navigateur si vous auriez besoin. soutien ff < 3, vous devez également ajouter display:-moz-inline-stack; sous display:inline-block; dans les .inline-block règle.)

Source

2010-05-29 17:19:26

« Si la largeur et la hauteur sont vraiment inconnus à l'avance, alors vous aurez besoin de saisir Javascript/jQuery pour définir la marge à gauche et la marge supérieure valeurs et vivre avec le fait que le client verra le div rapidement décalé pendant le chargement de la page, ce qui pourrait provoquer une expérience "wtf?"

Vous pouvez .hide() la div lorsque le DOM est prêt, attendez que la page se charge, définissez la div margin-left et margin-top valeurs et .show() la div nouveau.

$(function(){ 
    $("#content").hide(); 
)}; 
$(window).bind("load", function() { 
    $("#content").getDimSetMargins(); 
    $("#content").show(); 
});

Source

2011-09-26 23:53:55 nickarmstronggr

mauvaise pratique, mais si déjà, cachez-la dans le css, et ne l'affichez que lorsque jq est chargé. – Dementic

Cocher cette Demo jsFiddle

ensemble suivant deux choses

HTML align valeur d'attribut centre
CSS marge gauche et marge droite valeur définie propriétés auto

CSS

<style type="text/css"> 
    #setcenter{ 
      margin-left: auto; 
      margin-right: auto;  
      // margin: 0px auto; shorthand property 
    } 
</style>

HTML

<div align="center" id="setcenter"> 
    This is some text! 
</div>

Source

2014-03-03 12:40:50

Alignement croisé du centre div du navigateur en utilisant CSS

Répondre

Questions connexes