[css] img element en text op gelijke hoogte uitlijnen

[mahi]

Hoi mensen,

Ik werk aan een menu voor m'n site maar stuit op een probleempje. Simplistisch voorgesteld ziet elke regel van het menu er als volgt uit:

code:

<div class="menu">
    [img]"icoontje.png"><a[/img]Menutitel</a>
</div>

Nu is dat icoontje wel wat groter dan de tekst. Dit heeft tot gevolg dat het menutiteltje dat achter het icoontje staat om gelijke hoogte met de onderkant van het icoontje staat:

code:

+---+
|img|
+---+ Menutitel

Nu is dat geen zicht en zou ik de tekst graag uitgelijnd hebben op het midden van het icoontje (of de omsluitende div die de hoogte van de afbeelding aanneemt)::

code:

+---+
|img| Menutitel
+---+

Ik heb al liggen experimenteren met vertical-align in de css, maar raak er niet uit. Die tekst blijft onderaan staan. Iemand enig idee?

[Hangloozz]

heb ik ook eens gevraagd: check

[Verwijderd]

http://www.w3.org/TR/REC-...ml#propdef-vertical-align

[mahi]

Hangloozz: Bedankt voor die tip van je. De oplossing die Pelle gaf in je topic werkt inderdaad, maar is niet W3C valid. Maar door die tip zag ik wel waar ik fout was. Ik probeerde de tekst vertikaal uit te lijnen in de CSS, maar je moet de afbeelding uitlijnen. Logisch is wat anders, maar het werkt

code:

div.menu img { vertical-align: middle; }