web-dev-qa-db-fra.com

Alignement du centre div du navigateur sur CSS

Quel est le moyen le plus simple d’aligner une div dont la position est relative horizontalement et verticalement à l’aide de CSS? La largeur et la hauteur de div sont inconnues, c'est-à-dire que cela devrait fonctionner pour chaque dimension div et dans tous les principaux navigateurs. Je veux dire l'alignement du centre.

J'ai pensé faire l'alignement horizontal en utilisant:

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

comme je l’ai fait ici .

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

Comment pourrais-je faire l'alignement vertical?

javascriptjqueryhtmlcssalignment
25
Misha Moroshko

Le centrage horizontal n'est possible que si la variable width de l'élément est connue, sinon le navigateur ne peut pas déterminer où commencer et se terminer. 

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

Ceci est parfaitement compatible avec crossbrowser.

Le centrage vertical n'est possible que si l'élément est positionné de manière absolue et possède une height connue. Cependant, le positionnement absolu casse margin: 0 auto; et vous devez donc l’aborder différemment. Vous devez définir ses top et left sur 50% et les margin-top et margin-left sur le négatif demi de ses 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é dans le monde réel.

Si la largeur et la hauteur sont vraiment inconnues au préalable, vous devrez alors saisir Javascript/jQuery pour définir les valeurs margin-left et margin-top et vous assurer que le client verra la div rapidement déplacée lors du chargement de la page, ce qui pourrait provoquer un " wtf? " expérience.

32
BalusC

"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 tout à fait 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 en connaître la hauteur ni la largeur, même si vous devez au moins connaître la hauteur du parent. 

Si votre 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 */
}

Alors # alignés-centraux seront centrés dans #container. C’est l’utilisation la plus simple de cette technique, mais c’est une méthode agréable à connaître.

Les règles marquées avec "/ * pour IE <8 * /" doivent être placées dans une feuille de style séparée, via l'utilisation de commentaires conditionnels.

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

edit: (Cet extrait particulier a été testé dans ie6 et ff3.6, mais j’utilise beaucoup cela. C’est un navigateur assez multi-navigateur. Si vous avez besoin de la prise en charge de ff <3, vous devez également ajouter display:-moz-inline-stack; sous display:inline-block; dans la règle .inline-block. )

7
Misha Reyzlin

Проверь это Demo jsFiddle

Становите следующие две вещи

  1. HTML выравнивать значение атрибута du serveur

  2. CSS marge-gauche et marge-droite affiche des informations complémentaires авто

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>
2
Jay Patel

"Si la largeur et la hauteur sont vraiment inconnues à l’avance, alors vous aurez besoin de javascript/jQuery pour définir les valeurs margin-left et margin-top Et de vivre avec le fait que le client verra la div rapidement être déplacé pendant le chargement de la page, ce qui pourrait provoquer une expérience "wtf?". "

Vous pouvez utiliser .hide() la div lorsque le DOM est prêt, attendre le chargement de la page, définir les valeurs de div margin-left et margin-top et à nouveau .show() la div.

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