Cross-Browser-DIV-Center-Ausrichtung mit CSS

Was ist der einfachste Weg, um eine Ausrichtung eines div deren position relative horizontal und vertikal mit CSS ? Die Breite und die Höhe des div ist unbekannt, d.h. es sollte für jedes div dimension und in allen gängigen Browsern. Ich meine, der mittig ausgerichtet ist.

Dachte ich, um die horizontale Ausrichtung mithilfe:

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

wie ich hier.

Ist das eine gute cross-browser-Lösung für die horizontale Ausrichtung ?

Wie konnte ich die vertikale Ausrichtung ?

InformationsquelleAutor der Frage Misha Moroshko | 2010-05-29

  1. 32

    Horizontale Zentrierung ist nur möglich, wenn das element width ist bekannt, sonst ist der browser nicht herauszubekommen, wo zu beginnen und zu enden. 

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

    Dies ist perfekt crossbrowser kompatibel.

    Vertikale Zentrierung ist nur möglich, wenn das element absolut positioniert und hat eine bekannte height. Die absolute Positionierung würde allerdings brechen margin: 0 auto; so müssen Sie diesen Ansatz anders. Müssen Sie Ihren top und left zu 50% und die margin-top und margin-left zu den negative Hälfte seiner width und height bzw.

    Hier ist eine copy ' N 'Paste' N ' 'runnable Beispiel:

    <!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>

    Sagte, vertikale Zentrierung ist in der Regel nur selten angewandt, in der realen Welt.

    Wenn die Breite und Höhe sind wirklich im Voraus nicht bekannt sind, dann werden Sie brauchen, um zu greifen, Javascript/jQuery um die margin-left und margin-top Werte und Leben mit der Tatsache, dass client werden die div-schnell verschoben werden, während das laden der Seite, die möglicherweise dazu führen, ein "wtf?" - Erlebnis.

    InformationsquelleAutor der Antwort BalusC

  2. 7

    "Vertikale Zentrierung ist nur möglich, wenn das element absolut positioniert und hat eine bekannte Höhe." – Diese Aussage ist nicht ganz richtig.

    Können Sie versuchen, und verwenden Sie display:inline-block; und die Möglichkeit zur hochkant innerhalb der übergeordneten box. Diese Technik erlaubt das ausrichten von element, ohne zu wissen, seine Breite und Höhe, obwohl es erfordert, dass Sie wissen Elternteils Höhe, zumindest.

    Wenn Ihr HTML;

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

    Und CSS ist:

    #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 */
}

    Dann #ausgerichtet-Mitte zentriert werden innerhalb von #container. Dies ist die einfachste Technik, aber es ist schön eins zu sein mit vertraut sind.

    Regeln gekennzeichnet mit "/* für IE < 8 */" gesetzt werden sollte, in einem separaten stylsheet, über die Verwendung von conditional comments.

    Können Sie ein Beispiel dieser hier: http://jsfiddle.net/UXKcA/3/

    edit: (dies insbesondere snippet getestet in ie6 und ff3.6, aber ich verwende es viel, es ist ziemlich cross-browser. wenn Sie benötigen support für ff < 3, Sie müssen auch hinzufügen display:-moz-inline-stack; unter display:inline-block; innerhalb .inline-block Regel.)

    InformationsquelleAutor der Antwort Misha Reyzlin

  3. 2

    Überprüfen Sie das Demo auf jsFiddle

    Stellen Sie folgende zwei Dinge

    1. HTML ausrichten Attribut-Wert center

    2. CSS margin-left und margin-right Eigenschaften Wert legen 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>

    InformationsquelleAutor der Antwort Jay Patel

  4. 0

    ", Wenn Sie die Breite und Höhe sind wirklich im Voraus nicht bekannt sind, dann werden Sie
    greifen müssen Javascript/jQuery, um die margin-left und margin-top
    Werte und Leben mit der Tatsache, dass client werden die div-schnell sein
    verschoben, während das laden der Seite, die möglicherweise dazu führen, ein "wtf?" erleben".

    Könnte man .hide() im div, wenn das DOM fertig ist, warten Sie, bis die Seite geladen ist, legen Sie die div margin-left und margin-top Werte, und .show() die div wieder.

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

    InformationsquelleAutor der Antwort nickarmstronggr

Schreibe einen Kommentar