A vertical-align rejtélye …

Címkék: ,

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:

Függőleges Igazítás 1.

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:

Függőleges Igazítás 2.

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.

Függőleges Igazítás 3.

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.

Függőleges Igazítás 4.

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)

Hozzászólás írása a “A vertical-align rejtélye …” című bejegyzéshez:

Kötelező!

Kötelező!

:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen:

Hozzászólások a “A vertical-align rejtélye …” című bejegyzéshez:

  1. Írta: Bence (2010/08/06 15:31) • »»

    ha a box-nak beállítjuk a display: table-cell -t, akkor is működik. Persze akkor azt lesz nehéz pozícionálni…

  2. Írta: Petya (2010/08/06 15:35) • »»

    Valóban, viszont azt hiszem a table CSS paramétert még meglehetősen össze-vissza támogatják a böngészők, szóval nehéz vele hordozható megjelenést készíteni.

  3. Írta: Icebob (2010/09/26 11:03) • »»

    A line-height: 200px; tulajdonság megadásával, is elérhető ez a hatás.

  4. Írta: BlindGod (2011/04/17 21:18) • »»

    Röhelyes, hogy ennyire körülményes megoldani ezt, ez egy óltári hiányosság a css-től.

    Én a minap szerencsétlenkedtem, ezzel Viszont pl:: a line-height: jómegoldásnak tűnik, viszont ha kétsoros szöveget szeretnék akkor már gondba ütközik mivel ez a sormagasság…

    Szal keresek tovább, ! :D

  5. Írta: Sanyi (2012/09/27 10:51) • »»

    szöveget 2 span-ba kell tenni. Display: inline-block; a külső line-height-je a doboz magassága, a belső span line-height-je pedig normal. Ilyenkor a több soros szöveg is középre kerül.