paweł ludwiczak

Dzisiaj ktoś na Twitterze zapytał, czy jest jakiś sposób żeby tekst w jakimś elemencie przylegał do dolnej krawędzi. Tym elementem był znacznik <h1>. I to wszystko, co było z markupu. H1 był też dodatkowo ostylowany: wysokość, obramowanie itp… Od razu stwierdziłem, że tekstu nie da się wyrównać do dolnej linii bez dodatkowego markupu. Po chwili jednak przyszło mi do głowy inne rozwiązanie. Co prawda działa ono tylko w nowoczesnych przeglądarkach, ale cóż… Stwierdziłem, że rozwiążę ten problem, ot po prostu dla sztuki. To nasz początkowy kod:

h1 {
    border: 1px solid black;
    width: 100%;
    height: 200px;
    text-align: center;
}

Oczwiście nie trudno stwierdzić, że z takim kodem powstanie nam jakiś kontener (<h1>) z tekstem wyśrodkowanym w poziomie. I jak ten tekst teraz przenieść na dół elementu? Można by owy tekst (przepraszam za wszelkie powtórzenia ;)) wewnątrz wypozycjonować absolutnie względem kontenera, ale to wymaga dodatkowych znaczników. A na te sobie pozwolić nie możemy. Dlatego z pomocą przychodzi Flexible Box Model, o którym można przeczytać nieco więcej tutaj: klik! Dzięki zmianie wartości atrybutu display na box dostajemy kilka (bodajże 8) nowych atrybutów do dyspozycji:

• box-orient
• box-align
• box-pack
• box-flex
• box-flex-group
• box-ordinal-group
• box-direction
• box-lines

Nas interesują dwie z nich (w zasadzie to jedna, ale to zaraz wytłumaczę dlaczego):

• box-align – to jest nasz kluczowy atrybut. Ustawiamy w nim, jakie ma być pozycjonowanie zawartości danego elementu. Tak więc box-align przyjmuje pięć wartości: start | end | center | baseline | stretch. Ostatnia z nich jest domyślna. My powinniśmy zmienić ją na wartość end. To ona wypozycjonuje nasz tekst właśnie na dole.
• box-pack – jeśli wartość box-orient jest ustawiona na horizontal (a tak jest domyślnie) to wtedy dzięki box-pack jesteśmy w stanie ustalić pozycję tekstu (boksa) w poziomie *

* – teoretycznie ta wartość nie powinna być nam potrzebna, jako, że element <h1> ma już text-align: center, jednakże zmieniliśmy sposób wyświetlania tego elementu (display z domyślnego block na nowy box, a wiadomo, że text-align działa tylko na elementach blokowych oraz tabelarycznych), stąd potrzeba wyśrodkowania tekstu raz jeszcze w inny sposób. Dlatego dopisujemy do naszego arkusza CSS takie oto linijki:

h1 {
    ... 
    display: box;
    box-pack: center;
    box-align: end;
}

A jak wiadomo, życie nie jest takie proste, dlatego musimy targetować poszczególne przeglądarki osobno. Zatem kod który dopiszemy to nie będą 3 nowe linijki a aż 9:

h1 {
    ... 
    display: box;
    box-pack: center;
    box-align: end;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: end;
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: end;
}

Tak czy inaczej osiągamy nasz cel. Wersja finalna + demo.

UPDATE:
Okazuje się, że Firefox ma problemy z Flexible Box Model, jeśli dany element jest wypozycjonowany absolutnie. Dlatego też musiałem nieco poprawić mój przykładowy kod. Teraz wszystko powinno być ok. Bug właśnie zgłaszam Firefoksowi, a za wychwycenie tego błędu bardzo dziękuję css3.pl.