Ich habe ein div-Element, das Text enthält, und ich möchte den Inhalt dieses div vertikal zentriert ausrichten.
Hier ist mein div-Stil:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
Was ist der beste Weg, dies zu tun?
Sie können diesen grundlegenden Ansatz ausprobieren:
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
Das funktioniert allerdings nur für eine einzige Textzeile, weil wir die Zeilenhöhe auf die gleiche Höhe wie das enthaltende Box-Element setzen.
Dies ist eine weitere Möglichkeit, Text vertikal auszurichten. Diese Lösung funktioniert sowohl für eine einzelne Zeile als auch für mehrere Textzeilen, erfordert aber immer noch einen Container mit fester Höhe:
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>
Das CSS verkleinert einfach das <div>
, richtet das <span>
vertikal mittig aus, indem es die Zeilenhöhe des <div>
gleich seiner Höhe setzt, und macht aus dem <span>
einen Inline-Block mit vertical-align: middle
. Dann wird die Zeilenhöhe für das <span>
wieder auf normal gesetzt, so dass sein Inhalt natürlich innerhalb des Blocks fließt.
Und hier ist eine weitere Möglichkeit, die auf älteren Browsern, die display: table
und display: table-cell
nicht unterstützen (im Grunde nur Internet Explorer 7) möglicherweise nicht funktioniert. Mit CSS simulieren wir das Verhalten von Tabellen (da Tabellen die vertikale Ausrichtung unterstützen), und der HTML-Code ist der gleiche wie im zweiten Beispiel:
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
Diese Technik verwendet ein absolut positioniertes Element, bei dem oben, unten, links und rechts auf 0 gesetzt werden, und wird in einem Artikel des Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS, näher beschrieben.
Sie können dies ganz einfach tun, indem Sie den folgenden CSS-Code hinzufügen:
display: table-cell;
vertical-align: middle;
Das bedeutet, dass Ihr CSS schließlich wie folgt aussieht:
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}
<div id="box">
Some text
</div>
Für eine einzelne Textzeile (oder ein einzelnes Zeichen) können Sie diese Technik verwenden:
Sie kann verwendet werden, wenn #box
eine nicht-feste, relative Höhe in % hat.
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Sehen Sie sich eine Live-Demo bei JsBin (leichtere Bearbeitung von CSS) oder [JsFiddle][2] (leichtere Änderung der Höhe des Ergebnisrahmens) an.
Wenn Sie den inneren Text in HTML und nicht in CSS platzieren wollen, dann müssen Sie den Textinhalt in ein zusätzliches inline-Element einpacken und #box::after
entsprechend bearbeiten. (Und natürlich sollte die Eigenschaft content:
entfernt werden.)
Zum Beispiel, <
. In diesem Fall sollte
#box::afterdurch
#box span` ersetzt werden.
Für Internet Explorer 8-Unterstützung müssen Sie ::
durch :
ersetzen.