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?
Ich teilte die Kurzversion für alle, die es wünschen.
.firstDivision {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.firstDivision .verticalCenter {
text-align: center;
display: table-cell;
vertical-align: middle;
}
<div class="firstDivision">
<div class="verticalCenter">
Text was centered for Vertical.
</div>
</div>
Da ich jedes Mal, wenn ich ein div vertikal zentrieren muss, immer wieder danach google und diese Antwort immer zuerst kommt, werde ich dies für die Zukunft aufheben (da keine der angebotenen Lösungen meinem Bedarf entspricht):
Wenn man also bereits Bootstrap verwendet, kann man dies wie unten beschrieben tun:
<div style="min-height: 100vh;" class="align-items-center row">
<div class="col" style="margin: auto; max-width: 750px;"> //optional style to center horizontally as well
//content goes here
</div>
</div>
Ich habe gerade einen anderen Weg gefunden, der bei mir funktioniert hat:
<div class="container">
<div class="vertical">
<h1>Welcome</h1>
<h2>Aligned Vertically</h2>
<a href="#">Click ME</a>
</div>
</div>.vertical{
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Durch die Verwendung des transform Eigenschaft können wir ein vertikal zentriertes div leicht tun.
.main-div {
background: none repeat scroll 0 0 #999;
font-size: 18px;
height: 450px;
max-width: 850px;
padding: 15px;
}
.vertical-center {
background: none repeat scroll 0 0 #1FA67A;
color: #FFFFFF;
padding: 15px;
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
<div class="main-div">
<div class="vertical-center">
<span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>
</div>
</div> 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/