Centrowanie layoutu w CSS

Jest to jeden z poważniejszych problemów związanych z CSS, ponieważ nie jest rozwiązany w sposób jednoznaczny, który byłby bez problemu interpretowny przez wszystkie przeglądarki. Dlatego jesteśmy zmuszeni posługiwać się hackami takimi jak ten, który jest wykorzystany na tej stronie. Jego autorem jest Dan Cederholm.

Przede wszystkim potrzebujemy diva, w którym będzie umieszczone wszystko inne. Nazwiemy go `container`.

Teraz używając CSS wycentrujemy wszystko, co znajduje się w `#container`:

body {
text-align: center;
}

#container {
margin: 0 auto;
width: xxxpx;
}

Jak pewnie zauważyliście wszystko w body centrujemy. Ktoś mógłby zapytać po co to ustawiać jak i tak bez tego wszystko działa. A mianowicie robimy to dla IE5/Win, która tylko w ten sposób poprawnie wyświetli stronę. Ustawiamy też dla `#container` specyficzną szerokość (jakąkolwiek kto chce). Drugim kawałkiem, który sprawia, że wszystko działa jest `margin: 0 auto;`. Ustawiamy margines 0 pikseli u góry i u dołu, a z lewej i prawej dajemy wartość automatyczną.

To jest to. Pozostaje jeszcze tylko jeden problem. Jeśli zostawilibyśmy kod w obecnej postaci to tekst wewnątrz diva byłby wycentrowany. Jeżeli tego nie chcecie to trzeba dodać jeszcze jedną linijkę:

#container {
margin: 0 auto;
width: xxxpx;
**text-align: left;**
}

Dzięki temu, wszystko w divie `#container` będzie wyrównane do lewej a cały layout będzie wycentrowany. Taki sam efekt można osiągnąć centrując nie cały layout, ale pojedyncze elementy strony.

> Artykuł jest tłumaczeniem ze strony SimpleBits.