CSS Vertikale Ausrichtung Mitte
Ich versuche, ein SPAN-Element in der Mitte eines Elternelements vertikal auszurichten.
Das mache ich:
Ich versuche, sowohl die Benutzernamen- als auch die Passwort-Labels vertikal (mittig) zu den Eingabefeldern auszurichten.
Dies ist mein HTML-Code:
%Vor%Das habe ich ausprobiert:
%Vor%Das vertikale Ausrichten eines Bildelements in diesem Wrapping-DIV funktioniert absolut gut, in Chrome sowieso, es passt einfach nicht zu meinem SPAN!
Jede Hilfe wäre toll.
5 Antworten
Vertikales Ausrichten über CSS kann schwierig sein, und während CSS3 eine Menge Extras mit sich bringt, ist die CSS3-Unterstützung im aktuellen Browser-Markt glanzlos.
Um diesen Effekt zu erreichen, setze ich die Eigenschaft line-height des untergeordneten Elements auf die Höhe seines enthaltenen Elements.
Zum Beispiel würde ich das folgende CSS verwenden:
%Vor% Der einzige Nachteil bei der Verwendung von line-height zum vertikalen Ausrichten besteht darin, dass der Text in eine zweite Zeile überläuft. In diesem Fall wird Ihr Design im Wesentlichen unterbrochen.
Entfernen Sie einfach die float -Eigenschaft aus Ihrer span-Klasse und setzen Sie sie auf display:inline-block und die vertical-align:middle -Eigenschaft funktioniert wie folgt:
Bearbeiten: Ihren Code ein wenig aufgeräumt, hier ist eine Demo, die über Browser hinweg funktionieren sollte. Ссылка
Ich fand den einfachsten Weg, dies zu tun, ist die Display-Eigenschaft des übergeordneten Containers auf table und die untergeordnete display-Eigenschaft auf table-cell
Ich konnte dies erreichen, um ein Ankerelement innerhalb eines div vertikal auszurichten.
Ich habe es in Ihrer Frage in diesem jsFiddle ausgedrückt.
Ich konnte nie vertical-align in etwas anderem als & lt; td & gt; s arbeiten lassen.
Ein Workaround, den ich normalerweise verwende, wäre, eine Höhe für .login_field_wrap zu definieren und dann die Eigenschaft line-height in Ihrem & lt; span & gt; gleich .login_field_wrap 's Höhe sein.
Tags und Links css