Sie können verwenden line-height: 50px;
, Sie werden dort nicht brauchen vertical-align: middle;
.
Demo
Das Obige schlägt fehl, wenn Sie mehrere Zeilen haben. In diesem Fall können Sie Ihren Text also mit span
und als verwenden display: table-cell;
und display: table;
zusammen mit vertical-align: middle;
und auch vergessen, width: 100%;
für zu verwenden#abc
Demo
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
display: table;
width: 100%;
}
#abc span {
vertical-align:middle;
display: table-cell;
}
Eine andere Lösung, die ich mir hier vorstellen kann, ist die Verwendung von transform
Eigenschaften, bei translateY()
denen Y
offensichtlich für Y-Achse steht. Es ist ziemlich einfach ... Alles, was Sie tun müssen, ist die Position der Elemente auf absolute
und später 50%
von der Position zu setzen und top
von ihrer Achse mit negativ zu übersetzen-50%
div {
height: 100px;
width: 100px;
background-color: tomato;
position: relative;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Demo
Beachten Sie, dass dies in älteren Browsern, z. B. IE8, nicht unterstützt wird. Sie können jedoch IE9 und andere ältere Browserversionen von Chrome und Firefox mithilfe von -ms, -moz
bzw. -webkit
Präfixen erstellen.
Weitere Informationen dazu transform
finden Sie hier .
Es ist ganz einfach: Geben Sie dem übergeordneten Div Folgendes:
und geben Sie dem Kind div (s) Folgendes:
Das ist es!
quelle
display:table;
dem Elternteil hinzufügen , damit es funktioniert.Alte Frage, aber heutzutage macht CSS3 die vertikale Ausrichtung wirklich einfach !
#abc
Fügen Sie einfach dem folgenden CSS hinzu:Einfache Demo
Ursprüngliche Frage Demo aktualisiert
Einfaches Beispiel:
quelle
CSS3
?Ich habe diese Lösung von Sebastian Ekström gefunden. Es ist schnell, schmutzig und funktioniert sehr gut. Auch wenn Sie die Größe der Eltern nicht kennen:
Lesen Sie den ganzen Artikel hier .
quelle
transform-style: preserve-3d;
!Sie können die Zeilenhöhe so groß wie die Höhe des Div verwenden. Aber für mich ist die beste Lösung dies ->
position:relative; top:50%; transform:translate(0,50%);
quelle
Wie wäre es mit Hinzufügen
line-height
?Geige, Zeilenhöhe
Oder
padding
weiter#abc
. Dies ist das Ergebnis mit PolsterungAktualisieren
Fügen Sie in Ihrem CSS hinzu:
Das Ergebnis . Hoffe das was du suchst.
quelle
Versuche dies:
Eine andere Methode zum Zentrieren eines Div:
quelle
quelle
Verwenden Sie die CSS-Eigenschaft translateY, um Ihren Text vertikal im Container zu zentrieren
Und wenden Sie es dann auf Ihr enthaltenes DIV an
Passen Sie den Prozentsatz der Übersetzung an Ihre Bedürfnisse an. Hoffe das hilft
quelle
Dieser Code gilt für die vertikale mittlere und horizontale Mittelausrichtung ohne Angabe einer festen Höhe:
quelle