[CSS] Inhoud LI bottom alignen

**Lou Landre** · 08-10-2006, 19:31

Ik heb een reeks van LI's, met een breedte, hoogte en een float: left.. Ik krijg het hierbij niet voorelkaar om de inhoud van deze LI's aan de onderkant van de LI te alignen... een vertical-align: bottom leek me heel logisch, maar dat werkt dus niet.. Iemand een idee?

Voorbeeld:

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="XHTML namespace"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<title>Untitled Document</title> 
<style> 
ul { 
    list-style: none; 
} 
li { 
    float:left; 
    width: 15px; 
    height: 150px; 
    border: 1px solid red; 
} 
</style> 
</head> 
<body> 
<ul> 
    <li>1<br />2<br />3</li> 
    <li>1<br />2<br />3</li> 
    <li>1<br />2<br />3</li> 
    <li>1<br />2<br />3</li> 
</ul> 
</body> 
</html>

**Dirk Bonhomme** · 08-10-2006, 21:36

vertical-align is alleen voor afbeeldingen. Zover ik weet bestaat deze mogelijkheid niet in CSS, iets waar ik me ook al vaak aan geërgerd heb.

Je hebt een hoogte opgegeven, dus mss kan je dmv padding-top het effect bereiken (mits alle tekst op 1 regel staat)

Wat ook een oplossing is, maar eigenlijk niet netjes is om die li een position:relative te geven en dan binnen de <li></li> nog een <div> ofzo te plaatsen en die een position:relative en bottom:0 te geven.

Als er iemand is met een echte oplossing om tekst verticaal te aligneren, dan ben ik daar ook erg benieuwd naar ! :-)

**Erwin Hofman** · 13-10-2006, 13:06

Origineel gepost door Dirk Bonhomme

Als er iemand is met een echte oplossing om tekst verticaal te aligneren, dan ben ik daar ook erg benieuwd naar ! :-)

Helaas niet, ik zou inderdaad gebruik maken van padding-top, en die waarde weer afhalen van de hoogte dat de listitem moet hebben.

**Bram Lodens** · 13-10-2006, 16:37

Inderdaad Erwin, zo doe ik het ook.

**Jasper van der Meer** · 16-10-2006, 03:50

@Dirk: wat zeg je nou? vertical-align alleen voor afbeeldingen? Nee dus. Vertical-align werkt alleen als er gebruik wordt gemaakt van een hoogte (height) en lijnhoogte (line-height). Wat jij zegt is je reinste kolder.

Als je iets aan de onderzijde wilt uitlijnen, kun je dat ongeveer als volgt doen:

Code:

 <ul>
<li>bla bla bla</li>
</ul>

li {
height: 20px;
line-height: 20px;
vertical-align: bottom;
display: block;
width: 200px;
}

**Dirk Bonhomme** · 16-10-2006, 10:15

Origineel gepost door Jasper van der Meer

@Dirk: wat zeg je nou? vertical-align alleen voor afbeeldingen? Nee dus. Vertical-align werkt alleen als er gebruik wordt gemaakt van een hoogte (height) en lijnhoogte (line-height). Wat jij zegt is je reinste kolder.

Ik heb het even opgezocht en getest. Ik had inderdaad ongelijk met te zeggen dat het alleen voor afbeeldingen is, maar voor de rest wil ik toch meer bewijs van jou dat vertical-align overal op werkt.

Hieronder een quote van de W3C documentatie:

When an element contains text that is rendered in more than one font, user agents may determine the 'line-height' value according to the largest font size.

Generally, when there is only one value of 'line-height' for all inline boxes in a paragraph (and no tall images), the above will ensure that baselines of successive lines are exactly 'line-height' apart. This is important when columns of text in different fonts have to be aligned, for example in a table.

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

Zover ik dit begrijp en kan testen, werkt het alleen:
- Op inline elementen
- In tabellen

Een li (+ alles met een hoogte) is een block element, dus leg jij me even uit hoe ik in mijn testcase de tekst onderaan de li kan zetten, onafhankelijk van het aantal regels ?

http://verticalalign.bytelogic.be/

**Jasper van der Meer** · 16-10-2006, 16:39

/kick mijzelf. Inderdaad. Ik neem alles terug, mijn welgemeende excuses!!!!

**Dirk Bonhomme** · 16-10-2006, 18:14

No problem ;-)

Maar dus nog steeds geen echte oplossing voor dit probleem :( Hopelijk verzinnen ze hier iets op bij de volgende versie van CSS.

**Jasper van der Meer** · 17-10-2006, 03:18

dus dan toch maar met vieze paddings :( Echt stom dat ik in alle websites die ik gemaakt heb nog nooit dit probleem ben tegengekomen...

[CSS] Inhoud LI bottom alignen