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?
.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
Dies kann auf zwei Arten geschehen
body{
left: 50%;
top:50%;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}OR
Verwendung von Flex
body {
height:100%
width:100%
display: flex;
justify-content: center;
align-items: center;
}align-items:center; macht den Inhalt vertikal zentriert
justify-content: center; macht den Inhalt horizontal zentriert
Dorthin gehe ich immer, wenn ich zu einem anderen Ort zurückkehren muss. dieses Thema .
Für diejenigen, die den Sprung nicht wagen wollen:
position:relative o position:absolute .position:absolute y top:50% auf dem untergeordneten Container, um den oberen Teil nach unten in die Mitte des übergeordneten Containers zu verschieben.Ein Beispiel dafür im Code:
<style type="text/css">
#myoutercontainer {position:relative}
#myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
Ich habe gerade dieses CSS geschrieben, und wenn Sie mehr wissen möchten, lesen Sie bitte weiter: Dieser Artikel mit vertikal ausrichten alles mit nur 3 Zeilen von CSS .
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
Bitte fügen Sie eine Stapel-Schnipsel der zeigt, wie dieser CSS-Code vertikal richtet eine div .
Das funktioniert auch <div style="display:flex"><div style="margin:auto">Inner</div></div>
Ich bin auf diese wunderbare Erklärung der Ausrichtungselemente gestoßen und rechtfertige den Inhalt. Unbedingt lesen: stackoverflow.com/questions/42613359/
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/