Wyśrodkowanie za pomocą CSS

: Home

Wpisany przez Patryk yarpo Jar

wtorek, 22 września 2009 19:07

Jeszcze klka lat temu każdy, kto chciał wyśrodkować jakiś fragment strony używał znaczników:

1.<center>To będzie na środku</center>

Dziś jednak nie można już czegoś takiego stosować! Należy tworzyć strony łatwe do modyfikacji, w których do stworzenia struktury używa się HTML/XHTML, a właściwości i wygląd poszczególnych elementów opisuje się w CSS. Powyższe znaczniki zostały wycofane ze specyfikacji nowszych wersji HTML.

Dlatego jeśli chcemy wyśrodkować warstwę [chodź w tym wypadku wyśrodkujemy wszystko co jest na stronie] należy zrobić coś takiego:

<html>
 
    <head>
 
    <style type="text/css">
 
    body { text-align: center; }
 
    div {
 
         border: 1px solid;
 
         width: 50%;
 
    }</style>
 
    </head>
 
    <body>
 
    <div>Ta warstwa będzie wyśrodkowana</div>
 
    </body>
 
    </html>

Ta metoda jest jednak nie do końca poprawna... Więc dlaczego ją napisałem?! Gdyż jest sposobem na - w moim odczuciu - najgorszą przeglądarkę świata - Internet Explorer.

Nowoczesne przeglądarki poprawnie interpretujące style CSS będą miały coś takiego:

<html>
 
    <head>
 
    <style type="text/css">
 
    div {
 
         border: 1px solid;
 
         width: 50%;
 
         margin: 0 auto 0 auto; /* można zapisać krócej: margin: 0 auto; */
 
    }
 
    </style>
 
    </head>
 
    <body>
 
    <div>Ta warstwa będzie wyśrodkowana</div>
 
    </body>
 
    </html>

Powyższy sposób będzie działać w Operze i Firefoxie. A żeby dany element został wyśrodkowany we wszystkich przeglądarkach można użyć:

<head>
 
    <style type="text/css">
 
    body { text-align: center; }
 
    div {
 
         border: 1px solid; width: 50%;
 
         text-align: left;
 
         margin: 0 auto 0 auto; /* można zapisać krócej: margin: 0 auto; */
 
    }
 
    </style>
 
    </head>

Czyli, jak wynika z przykładu, starczy połączyć obie metody. W ten sposób można nie tylko wyśrodkowywać warstwy [DIV]. Można dowolny element blokowy (akapit, tabela, nagłówek itp.). Jak może już spostrzegłeś do reguły dla DIV dodałem 'text-align: left'. Dzięki temu zawartość warstwy będzie dosunięta do lewej - gdybym tego nie zrobił zarówno warstwa, jak i treść umieszczona w warstwie zostałaby wyśrodkowana - dziedziczenie.

Tags:

< Poprzednia

Dodaj komentarz

JComments