Ich möchte eine div vertikal mit CSS. Ich möchte keine Tabellen oder JavaScript, sondern nur reines CSS. Ich habe einige Lösungen gefunden, aber bei allen fehlt die Unterstützung für Internet Explorer 6.
<body>
<div>Div to be aligned vertically</div>
</body>Wie kann ich eine div vertikal in allen gängigen Browsern, einschließlich Internet Explorer 6?
Verwendung der Flex-Eigenschaft von CSS.
.parent {
width: 400px;
height:200px;
background: blue;
display: flex;
align-items: center;
justify-content:center;
}
.child {
width: 75px;
height: 75px;
background: yellow;
}
<div class="parent">
<div class="child"></div>
</div>oder durch mit display: flex; y margin: auto;
.parent {
width: 400px;
height:200px;
background: blue;
display: flex;
}
.child {
width: 75px;
height: 75px;
background: yellow;
margin:auto;
}
<div class="parent">
<div class="child"></div>
</div>Textcenter anzeigen
.parent {
width: 400px;
height: 200px;
background: yellow;
display: flex;
align-items: center;
justify-content:center;
}
<div class="parent">Center</div>Höhe und Breite in Prozent (%).
.parent {
position: absolute;
height:100%;
width:100%;
background: blue;
display: flex;
align-items: center;
justify-content:center;
}
.child {
width: 75px;
height: 75px;
background: yellow;
}
<div class="parent">
<div class="child"></div>
</div>
Leider - aber nicht überraschend - ist die Lösung komplizierter, als man es sich wünschen würde. Außerdem müssen Sie leider zusätzliche Divs um das Div herum verwenden, das Sie vertikal zentrieren möchten.
Für standardkonforme Browser wie Mozilla, Opera, Safari usw. müssen Sie das äußere div so einstellen, dass es als Tabelle und das innere Div, das als Tabellenzelle - die dann vertikal zentriert werden können. Für Internet Explorer müssen Sie Position das innere div absolut innerhalb des äußeren Divs und geben Sie dann die top als 50% . Auf den folgenden Seiten wird diese Technik gut erklärt, und es werden auch einige Codebeispiele bereitgestellt:
Es gibt auch eine Technik, um die vertikale Zentrierung mit JavaScript durchzuführen. Vertikale Ausrichtung von Inhalten mit JavaScript und CSS demonstriert es.
Wenn jemand nur den Internet Explorer 10 (und höher) benutzt, verwenden Sie Flexbox :
.parent {
width: 500px;
height: 500px;
background: yellow;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.centered {
width: 100px;
height: 100px;
background: blue;
}
<div class="parent">
<div class="centered"></div>
</div>Flexbox-Unterstützung: http://caniuse.com/flexbox
Ein moderner Weg, ein Element vertikal zu zentrieren, wäre die Verwendung von flexbox .
Sie brauchen ein Elternteil, das die Höhe bestimmt, und ein Kind, das in der Mitte steht.
Das folgende Beispiel zentriert ein div in der Mitte Ihres Browsers. Wichtig ist (in meinem Beispiel), dass Sie height: 100% à body y html und dann min-height: 100% zu Ihrem Container.
body, html {
background: #F5F5F5;
box-sizing: border-box;
height: 100%;
margin: 0;
}
#center_container {
align-items: center;
display: flex;
min-height: 100%;
}
#center {
background: white;
margin: 0 auto;
padding: 10px;
text-align: center;
width: 200px;
}
<div id='center_container'>
<div id='center'>I am center.</div>
</div>
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* (x, y) => position */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
.vertical {
position: absolute;
top: 50%;
//left: 0;
transform: translate(0, -50%); /* (x, y) => position */
}
.horizontal {
position: absolute;
//top: 0;
left: 50%;
transform: translate(-50%, 0); /* (x, y) => position */
}
div {
padding: 1em;
background-color: grey;
color: white;
}
<body>
<div class="vertical">Vertically left</div>
<div class="horizontal">Horizontal top</div>
<div class="center">Vertically Horizontal</div>
</body>Verwandt: Bild zentrieren
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
29 Stimmen
@MarcoDemaio Sind die Leute nicht ständig verpönt
tablesfür Layouts hier?17 Stimmen
@Chud37: es hängt davon ab, was Sie tun müssen, Tabellen für das Layout sind in der Regel nicht vielseitig und lange in Code eingeben, mit css können Sie leicht ändern ein 2 Spalten-Layout in einem 3/4/5 Sols Layout usw. Aber in diesem Fall ist anders, mit Dutzenden von css Tipps und Tricks für eine so einfache Aufgabe, die mit einer perfekten Cross-Browser-Tabelle erreicht werden könnte, ist es wie der Versuch, in Ihr Haus durch das Fenster statt mit der Tür zu betreten.
0 Stimmen
Für den Fall, dass sich die Leute nicht um die Unterstützung älterer Browser kümmern: davidwalsh.name/css-vertikal-zentriert
0 Stimmen
@MarcoDemaio : Weil die Verwendung von Tabellen mit valign Funktioniert nicht ? :)
0 Stimmen
Die moderne Art, es zu tun.
1 Stimmen
css-vertical-center.com es gibt einige Lösungen mit Informationen zur Browserkompatibilität
3 Stimmen
Es gibt viele Möglichkeiten, dies zu tun css-tricks.com/centering-css-complete-guide
0 Stimmen
Das hat mir geholfen: developer.mozilla.org/de-US/docs/Web/CSS/