Centrowanie zawartości z CSS

Publikacja ta jest tłumaczeniem“CSS Centering 101″ autorstwa Dan’a Cederholm - założyciela i dyrektora SimpleBits, LLC.

Poniższy artykuł jest odpowiedzią na często zadawane pytanie - w jaki sposób wyśrodkować strukturę strony o stałej szerokości przy użyciu CSS? Dla tych, którzy wiedzą - to sprawa prosta. Dla pozostałych, znalezienie dwóch niezbędnych zasad, aby uzyskać oczekiwany efekt może być frustrujące. W kodzie potrzebny nam będzie zasobnik, który będzie zawierał w sobie całą strukturę, którą chcemy wyśrodkować. Nazwiemy go “container”.

<body>
  <div id="container">
    ...tutaj zawiera się struktura strony...
  </div>
</body>

Używając CSS, następne dwie zasady sprawią, iż cokolwiek zawarte w #container zostanie wycentrowane (wyśrodkowane):

body {
  text-align: center;
  }

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

/* XXX to wybrana szerokość struktury */

Wszystko wewnątrz body zostanie wyśrodkowane. #container musi mieć określoną szerokość (wybraną dowolnie). margin: 0 auto; to drugi element, który sprawia, że wszystko działa. Określamy wielkość marginesów na 0 pixeli (górny i dolny) i ustalamy automatyczną wartość marginesów bocznych.

To wszystko. Jedynym problem, z jakim się spotkamy, to fakt, iż wszystko na stronie zostanie wyśrodkowane. Możemy to zmienić, aby wewnątrz zasobnika treść strony układała się standardowo:

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

Dzięki tej deklaracji, wszystko wewnątrz #container zostanie wyjustowane do lewej strony, nie zmieniając całej struktury naszej strony. Podobna technika może zostać uźyta nie tylko do centrowania całej struktury strony, ale także innych elementów na stronie.

Wiele osób zadaje pytanie, dlaczego text-align: center; jest potrzebne i że używanie tej metody jest niewskazane. Odpowiedź jest następująca - ten fragment kodu przewidziany jest dla odwiedzających nasze strony za pomocą przeglądarki Internet Explorer 5 w systemie Windows. Większość przeglądarek wyśrodkuje strukturę widząc auto, niestety nie IE5/Win.

2006 © All rights reserved.
Wszelkie prawa autorskie zastrzeżone. Kopiowanie, przetwarzanie i dystrybucja całości lub części powyższego materiału bez zgody autorów zabroniona! Jeśli jesteś zainteresowany publikacją tego materiału prosimy o kontakt.

Komentarze

Brak komentarzy. Dodaj komentarz jako pierwszy!