A vertical-align rejtélye …

Az első bejegyzésemmel azonnal bedoblak benneteket a mélyvízbe, és mutatok egy apró, de annál hasznosabb CSS trükköt, ami még haladó webfejlesztők számára is értékes információ lehet.

A kezdő webfejlesztők közül valószínűleg sokan próbáltak már doboz modellben szöveget függőlegesen igazítani a címben is említett vertical-align használatával. (Gondolom elsőre többnyire sikertelenül.) Logikusnak tűnhet az a gondolat, hogy teljesen hasonlóan kell alkalmazni, mint táblázatok esetében, csak a <td> vagy <th> tagek helyett egy <div> stílusleírásában próbáljuk deklarálni a tulajdonságot. Sajnos, a gyakorlatban ez nem vezet sikerre, ahogy azt a következő példa is szemlélteti:

HTML Kód:

<div class="box">Susnya Blog</div>
<br />
<table cellpadding="0" cellspacing="0">
<tr><td class="text">Susnya Blog</td></tr>
</table>

CSS Kód:

div.box    {
    background-color: #ffcc00;
    font-weight: bold;
    width: 200px;
    height: 200px;
    vertical-align: bottom;
}
td.text    {
    background-color: #ffcc00;
    font-weight: bold;
    vertical-align: bottom;
    width: 200px;
    height: 200px;
}

A W3 Consortium vertical-align-ról szóló leírásában kutakodva szemet szúrhat, hogy ez a paraméter csak szövegközi elemeknél alkalmazható (és persze táblázatok celláinál). Ezek után próbáljuk meg úgy, hogy a <div>-en belüli szöveget még egy <span> közé is zárjuk, és agresszív türelmetlenséggel adjunk ennek is egy rövid stílusleírást azt remélve, hogy most már a doboz aljához igazodik a szöveg. A táblázat kódját a későbbiekben már nem változtatom, így azt többször nem is ismételném:

HTML Kód:

<div class="box">
	<span class="text">Susnya Blog</span>
</div>

CSS Kód:

div.box    {
    background-color: #ffcc00;
    font-weight: bold;
    width: 200px;
    height: 200px;
    vertical-align: bottom;
}
span.text    {
    vertical-align: bottom;
}

A helyzet azonban továbbra is változatlan, és a szöveg makacsul ragaszkodik a doboz tetejéhez. Bármely más paraméterrel próbálkozunk, legyen az middle vagy baseline, a szöveg mozdulatlanul a bal felső sarokban marad. Ennél a pontnál úgy gondolom, hogy joggal lehetünk mérgesek a CSS szabvány alkotóira, ugyanis működhetne a doboz modellnél is olyan nemes egyszerűséggel, mint a táblázatoknál. A szabvány hivatalos oldalán a megoldás kulcsát egy rövid mondatban rejtették el, ami a következő:

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

Vagyis, az igazítások akkor fejtik ki a hatásukat, ha az azonos szinten elhelyezett szövegközi elemek magassága eltér egymástól. (Természetesen az angol mondat tükörfordításából ez nem következik.) Például, ha most a “Blog” szót felső indexbe szeretnénk tenni a “Susnya” szóhoz képest, akkor azt csak úgy tehetjük meg, ha a “Blog” szó betűinek méretét megváltoztatjuk. (Ez legyen minden érdeklődőnek egy önálló gyakorló feladat.)

Tehát, most kell trükkhöz folyamodnunk, és létrehozni egy olyan szövegközi dobozt, amely pontosan olyan magas, mint amihez képest a tartalmat vertikálisan középre szeretnénk igazítani. Jelen példa esetében ez egy 200 pixel magas szövegközi, de blokk szintű <span> elem lesz.

HTML Kód:

<div class="box">
	<span class="spacer"></span>
	<span class="text">Susnya Blog</span>
</div>

CSS Kód:

div.box    {
    background-color: #ffcc00;
    font-weight: bold;
    width: 200px;
    height: 200px;
}
span.text    {
    vertical-align: bottom;
}
span.spacer    {
    background-color: #3399ff;
    display: inline-block;
    width: 20px;
    height: 200px;
    vertical-align: bottom;
}

A könnyebb megértés és a látvány fokozása érdekében beszúrtam a CSS kódba egy paramétert, amivel 20 pixel szélesre állítottam a span.spacer-t. A szélesség 0 pixelre állítása után, vagy a width tulajdonság elhagyásával pedig teljesen egyező eredményt kapunk a táblázatos kivitellel.

A szemfülesebbek talán észrevették, hogy a div.box-ból elhagyható az igazítás, és talán azt is felfedezték, hogy a span.text-ben található igazításra sem feltétlenül van szükség. Ennek ellenére javaslom a használatát, mert nem minden böngészőben kerül pixelre pontosan középre a szöveg middle igazítás esetén!

Hozzászólás: » 5 « • Írta: Péter (2009/08/02 16:30)