it-swarm.com.de

Ausrichtung des div-Zentrums zwischen Browsern mithilfe von CSS

Was ist der einfachste Weg, um ein div, dessen Position relative horizontal und vertikal ist, mit CSS auszurichten? Die Breite und Höhe von div ist unbekannt, d. H. Es sollte für jede div-Dimension und in allen gängigen Browsern funktionieren. Ich meine zentrierung.

Ich dachte, die horizontale Ausrichtung zu machen, mit:

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

wie ich hier .

Ist dies eine gute Cross-Browser-Lösung für die horizontale Ausrichtung?

Wie kann ich die vertikale Ausrichtung durchführen?

25
Misha Moroshko

Die horizontale Zentrierung ist nur möglich, wenn width des Elements bekannt ist. Andernfalls kann der Browser nicht bestimmen, wo er beginnen und enden soll. 

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

Das ist perfekt crossbrowserfähig.

Eine vertikale Zentrierung ist nur möglich, wenn das Element absolut positioniert ist und ein bekanntes height hat. Die absolute Positionierung würde jedoch margin: 0 auto; brechen, so dass Sie dies anders angehen müssen. Sie müssen top und left auf 50% und margin-top und margin-left auf negative Hälfte von width und height setzen.

Hier ist ein 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>

Das heißt, vertikale Zentrierung wird in der Realität normalerweise selten angewendet.

Wenn die Breite und Höhe vorher wirklich unbekannt sind, müssen Sie Javascript/jQuery verwenden, um die Werte für margin-left und margin-top festzulegen, und davon ausgehen, dass der Client das div beim Laden der Seite schnell verschieben wird, was zu einem " wtf? " Erfahrung.

32
BalusC

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

Sie können versuchen, display:inline-block; und seine Möglichkeit zu verwenden, um innerhalb der Box des übergeordneten Elements vertikal ausgerichtet zu werden. Mit dieser Technik können Sie ein Element ausrichten, ohne dessen Höhe und Breite zu kennen, obwohl Sie mindestens die Höhe des übergeordneten Elements kennen müssen. 

Wenn Ihr HTML das ist;

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

Und dein 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 wird # align-middle innerhalb von #container zentriert. Dies ist die einfachste Anwendung dieser Technik, aber es ist eine schöne, die Sie kennen sollten.

Regeln, die mit "/ * für IE <8 * /" gekennzeichnet sind, sollten mithilfe von bedingten Kommentaren in einem separaten Stylesheet platziert werden.

Ein funktionierendes Beispiel hierzu finden Sie hier: http://jsfiddle.net/UXKcA/3/

edit: (Dieses bestimmte Snippet wurde in ie6 und ff3.6 getestet, aber ich verwende es häufig, es ist ziemlich browserübergreifend. Wenn Sie Unterstützung für ff <3 benötigen, müssen Sie auch display:-moz-inline-stack; unter display:inline-block; innerhalb der .inline-block-Regel hinzufügen. )

7
Misha Reyzlin

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

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

  1. HTML выравнивать значение атрибута по центру

  2. CSS margin-left ​​и margin-right ​​значение свойства установлено авто

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

"Wenn die Breite und Höhe vorher wirklich unbekannt sind, müssen Sie Javascript/jQuery verwenden, um die Werte für margin-left und margin-top Festzulegen und zu wissen, dass der Client das div schnell sieht be während des Ladens der Seite verschoben werden, was zu einem "wtf?" - Erlebnis führen kann. "

Sie können .hide() das div, wenn das DOM bereit ist, warten, bis die Seite geladen ist, die div margin-left- und margin-top-Werte festlegen und .show() das div erneut festlegen.

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