Budowniczy.net » Budowniczy » Artykuły » Wyrównywanie w poziomie i text-align

Wyrównywanie w poziomie i text-align

Dodany: 2006-11-25

Własność vertical-align kaskadowych arkuszy stylów (CSS) opisaliśmy w artykule Kłopotliwe vertical-align. Ten artykuł opisuje własność text-align, a także sposób wyrównania w poziomie względem rodzica elementów blokowych. Warto zaznaczyć, że te dwie własności nie stanowią pary, tak jak np. width oraz height. Zachowują się inaczej. Własność vertical-align ustawia element liniowy względem linii, w której jest zawarty, zaś text-align wyrównuje liniową zawartość bloku względem jego prawej i lewej krawędzi, a jest przypisywana elementom blokowym i komórkom tabel.

Wyrównywanie zawartości liniowej

W tym przypadku sytuacja jest prosta. Aby wyrównać liniową zawartość elementu blokowego względem jego bocznych krawędzi, stosuje się własność text-align, która może przyjąć jedną z czterech wartości: left (wyrównanie do lewej krawędzi), right (wyrównanie do prawej krawędzi), center (wyśrodkowanie) oraz justify (wyjustowanie, czyli rozłożenie elementów między lewą a prawą krawędzią - zwiększane są odstępy między wyrazami), np.:

p {
    text-align: left;
}

Poniższy przykład pokazuje w działaniu wszystkie cztery wartości:

Przykłady działania text-align

Kilka dodatkowych uwag:

Wyjustowanie zawartości wąskiego bloku

Wyrównywanie elementów blokowych

Co się jednak stanie, jeśli umieścimy wewnątrz inny element blokowy o mniejszej szerokości i zechcemy ustawić go po środku nadrzędnego bloku, nie zaś wycentrować jego zawartość? Gdy zdefiniujemy dla rodzica własność text-align:center, to w przeglądarkach zgodnych ze standardami otrzymany coś takiego:

Text-align w elemencie blokowym

Zawartość wewnętrznego bloku wyśrodkowała się, jednak sam blok nadal wyrównany jest do lewej krawędzi elementu nadrzędnego. Jest to prawidłowe zachowanie, gdyż text-align nie wyrównuje położenia elementów blokowych, tylko ich zawartości liniowej. Aby wyrównać położenie całego bloku względem prawej lub lewej krawędzi jego rodzica, możemy skorzystać z wartości auto dla prawego lub lewego marginesu. Tak więc, aby wyśrodkować blok, usuwamy text-align rodzica, określamy szerokość wewnętrznego bloku i nadajemy auto obydwu jego bocznym marginesom, np.:

p {
    margin-left: auto;
    margin-right: auto;
    ...
}

I otrzymujemy następujący efekt:

Wyśrodkowanie elementu blokowego

Jeśli zaś chcemy dosunąć blok do prawej strony, wtedy definiujemy:

p {
    margin-left: auto;
    margin-right: 0;
    ...
}

W efekcie zaś uzyskujemy:

Wyrównanie do prawej elementu blokowego

Powyższe metody zadziałają jednak tylko w przeglądarkach lepiej wspierających standardy, jak Firefox, Opera czy Safari. Internet Explorer w wersji 5 i 6 nie zrozumie tej instrukcji. Wyrówna za to, niezgodnie ze specyfikacją, również wewnętrzne bloki przy użyciu text-align dla rodzica. Jeśli więc chcemy wycentrować blok również w IE, musimy nadać z powrotem elementowi nadrzędnemu text-align:center. Otrzymamy jednak, oprócz wyśrodkowanego bloku, również wyśrodkowaną jego zawartość:

Wyśrodkowanie bloku i jego zawartości

Musimy więc przypisać kolejną własność text-align, tym razem wewnętrznemu blokowi, i nadać jest wartość left. Przy kodzie źródłowym XHTML w postaci:

<body>
    <div id="container">
     ...
    </div>
</body>
ustawiamy w stylach np.: 
body {
    text-align: center;
    ...
}

#container {
    width: 780px;
    margin: 0 auto;
    text-align: left;
    ...
}

W powyższy sposób uzyskujemy najczęściej spotykany układ strony internetowej, czyli blok o stałej szerokości na środku ekranu, a po bokach wolną przestrzeń, zależną od rozdzielczości monitora.

Komentarze

Ten artykuł możesz skomentować na witia.jogger.pl