Cross-Browser-div-Center-Ausrichtung mit CSS

Was ist der einfachste Weg, um eine div, deren Position ist relative horizontal und vertikal mit CSS? Die Breite und die Höhe des div ist unbekannt, d. H. Es sollte für jede div Dimension und in allen gängigen Browsern funktionieren. Ich meine Center Ausrichtung.Cross-Browser-div-Center-Ausrichtung mit CSS

Ich dachte die horizontale Ausrichtung machen mit:

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

wie ich here tat.

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

Wie könnte ich die vertikale Ausrichtung vornehmen?

Quelle

2010-05-29 Misha Moroshko

Wenn Sie die Ausrichtung sagen, ist nicht klar, mit was Sie das div ausrichten möchten. Meinst du das div zentrieren? –

Meinst du, div in der Mitte vertikal ausrichten – Starx

Sorry, ja ich meine Center-Ausrichtung. –

Horizontale Zentrierung ist nur möglich, wenn das Element width bekannt ist, sonst kann der Browser nicht herausfinden, wo er anfangen und enden soll.

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

Dies ist perfekt crossbrowser kompatibel.

Vertikale Zentrierung ist nur möglich, wenn das Element absolut positioniert ist und eine bekannte height hat. Die absolute Positionierung würde jedoch margin: 0 auto; brechen, so dass Sie dies anders angehen müssen. Sie müssen ihre top und left-50% und die margin-top und margin-left zum negativen Halb setzen seiner width und height sind.

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, wird vertikale Zentrierung in der Regel selten in der realen Welt angewendet.

Wenn die Breite und Höhe im Voraus wirklich unbekannt sind, dann müssen Sie Javascript/jQuery ergreifen, um die margin-left und margin-top Werte zu setzen und mit der Tatsache leben, dass der Client das div schnell während der Seitenlast verschieben sehen wird könnte ein "wtf?" Erfahrung.

Quelle

2010-05-29 14:47:26 BalusC

Beachten Sie, dass Sie IE im Standardmodus ausführen müssen, damit dies funktioniert (im Quirks-Modus können Sie ll muss 'text-align: center' auf dem Elternelement verwenden, um ein div horizontal zu zentrieren. –

Quirks-Modus ist nie eine Option für moderne Webseiten, so dass es keine Überlegung wert ist. – Rob

@Rob: Obwohl ich es hasse, einen Flammenkrieg darüber zu beginnen (niemand stirbt im Quirks-Modus), musste ich einmal den Quirks-Modus in einer Web-App verwenden, um das [border-box box model] (http: // www .quirksmode.org/css/box.html) im IE. –

"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, vertikal in seiner übergeordneten Box ausgerichtet werden. Mit dieser Technik können Sie Elemente ausrichten, ohne ihre Höhe und Breite zu kennen, obwohl Sie zumindest 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 Ihre 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 innerhalb #container zentriert werden. Dies ist die einfachste Anwendung dieser Technik, aber es ist eine nette Erfahrung.

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

Sie können ein funktionierendes Beispiel für das hier lesen: http://jsfiddle.net/UXKcA/3/

edit: (diese besondere Schnipsel getestet in IE6 und ff3.6, aber ich benutze diese viel, es ist ziemlich Cross-Browser, wenn Sie benötigen würde. Unterstützung für ff < 3, müssten Sie auch display:-moz-inline-stack; unter display:inline-block; innerhalb .inline-block Regel hinzuzufügen.)

Quelle

2010-05-29 17:19:26

„Wenn die Breite und Höhe vorher wirklich nicht bekannt sind, dann werden Sie müssen Javascript/jQuery greifen zu setzen der Rand links und Rand oben Werte und leben mit der Tatsache, dass der Client das div schnell Verschiebung während des Ladens der Seite sehen, die eine "wtf?" Erfahrung verursachen könnte. "

Sie konnten die div .hide(), wenn das DOM bereit ist, für die Seite warten zu laden, stellen 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(); 
});

Quelle

2011-09-26 23:53:55 nickarmstronggr

schlechte Praxis, aber wenn schon, verstecken Sie es in der CSS, und zeigen Sie es nur, wenn JQ geladen wird. – Dementic

prüfen diese Demo jsFiddle

Set folgende zwei Dinge

HTML align Attributwert Zentrum
CSS margin-left und margin-right Eigenschaften Auto

CSS

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

HTML

eingestellten Wert

Quelle

2014-03-03 12:40:50

Cross-Browser-div-Center-Ausrichtung mit CSS

Antwort

Verwandte Themen