li vertical-align middle

S

spaceman007

Aktives Mitglied
hallo zusammen...

ich glaub ich steh auf dem schlauch..

folgender Code:

CODE
<style>
ul li
{
list-style:none;
width:50px;
height: 40px;
background-color:#CC0066;
vertical-align:middle;
border: 1px solid black;
}
</style>

<ul>
<li>text</li>
<li>text text text text </li>
</ul>



um flexibel für andere Sprachversionen zu sein, versuchte ich für die Navigation 40px höhe zu reservieren und den Text in der Mitte des li darzustellen. falls der Text umbricht, werden in den 40px dann beide Textzeilen angezeit.. soweit die Theorie...

Nun die Praxis.. kann mir jemand erklären warum der vertical-align:middle hier nicht funktioniert?

Thanks

Gruss

Spaceman007
 
meinst du vielleicht anstatt vertical-align:middle text-align:center?
 
Nein nein, ich mein schon vertical-align.

Der Text soll sich in der Mitte des li (Auf die Höhe bezogen) befinden.
 
ich bin nicht so der CSS hirsch. Aber anscheinend funktioniert das vertical-align nicht im li. Weiss jemand warum?

so funktionierts:

CODE <style>
ul li
{
list-style:none;
width:50px;
height: 50px;
background-color:#fff;
border: 1px solid black;
}
.middle {vertical-align: middle;}
</style>

<ul>
<li><p class="middle">text</p></li>
<li>text text text text </li>
</ul>
 
Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile, bezogen auf das Elternelement, das ein Inline-Element sein muß. Man kann damit also kleineren Text an größerem Text oder auch an Grafiken ausrichten - nicht aber die vertikale Positionierung in einem Blockelement (z.B. div-Element) direkt bestimmen. Außerdem kann Text damit vertikal in Tabellenzellen positioniert werden. Der Normalwert ist dabei »baseline« - die Grundlinie.

Wahrscheinlich liegt es daran dass li kein inline element ist, bin mir aber nicht sicher.

Grüsse, Crazy
 
die Denkweise ist falsch. vertical-align richtet den Inhalt eines Elements nicht an der Größe des Elements aus, sondern es richtet ein Element nach dem anderen Element aus. Ausnahme sind Elemente, die die Eigenschaft display: table-cell aufweisen, was standardmäßig bei Tabellenzellen ist.
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben