Wie können Sie mehrzeiligen Text in einer Liste vertikal ausrichten?

8

Beispiel: jsfiddle.net/h5sE6/

css:

%Vor%

html:

%Vor%

Das ist trivial, wenn man Text vertikal anpasst und die Höhe der Zeilenhöhe anpasst, wenn man nur eine Zeile hat, aber mehr als das, die Dinge sehen wirklich verrückt aus.

    
Brandon Minton 10.10.2011, 19:03
quelle

2 Antworten

12

Sie können es mit einem Helfer :before -Element tun und indem Sie eine verschachtelte <span> hinzufügen:

%Vor%

Hier ist eine Demo in Aktion.

Dies funktioniert, weil zwei Inline-Block-Elemente vertikal miteinander ausgerichtet werden. Die Regel :before erstellt ein Inline-Block-Element, das dieselbe Höhe wie sein Elternelement hat, mit dem die Variable height <span> vertikal ausgerichtet werden kann.

Für eine vollständige Erklärung, wie es funktioniert, siehe dies Antwort zum vertikalen Ausrichten von Bildern.

    
Pat 10.10.2011, 19:20
quelle
5

Sie können dies tun, indem Sie ein span zu Ihrem Markup hinzufügen und dann display:table etc in Ihrem css verwenden:

%Vor%

CSS

%Vor%

Beispiel: Ссылка

    
Jason Gennaro 10.10.2011 19:16
quelle

Tags und Links