kursy
Wyśrodkowanie za pomocą CSS
Jeszcze klka lat temu każdy, kto chciał wyśrodkować jakiś fragment strony używał znaczników:
<center>To będzie na środku</center>
Dziś jednak nie można już czegos 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 elemetó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:
// tu jeszcze nagłowek
<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:
// tu jeszcze nagłowek
<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ędzia działać w Operze i Firefoxie. A żeby dany element został wyśrodkowany we wszystkich przeglądarkach można użyć:
/* piszę tylko część w której jest zmiana w porównaniu z poprzednimi listingami */
<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 winika 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łowek 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.
Patryk 'yarpo' Jar
