Web / www

Jak wyśrodkować dowolny blok DIV?

Początkowa przygoda z językiem opisowym CSS może przysporzyć kilku problemów, które dosyć skutecznie odstraszają i demotywują do dalszego zgłębiania wiedzy.

Jednym z początkowych problemów, na które napotyka początkujący web developer jest dosyć prosta, acz niezbyt oczywista kwestia wyśrodkowania schematu blokowego. Tworząc schemat strony internetowej możemy zechcieć wyrównać do środka poszczególny element strony lub całą stronę. W tym celu należy stworzyć blok (DIV), a w nim zawrzeć wszystko co chcemy wyśrodkować. Kolejnym krokiem jest odpowiednia stylizacja naszego kontenera w css.

Krok po kroku – jak wyśrodkować element blokowy div w CSS?

Określ, jaki element strony chcesz wyśrodkować względem przeglądarki a następnie umieść ten element w znaczniku DIV oraz przypisz mu odpowiednie, wymyślone przez siebie id. Ja w swoim przykładzie stworzę DIV o id „container”:

<br />
&lt;body&gt;<br />
 &lt;div id=&quot;container&quot;&gt;<br />
  &lt;p&gt;Ta treść będzie wyśrodkowana!&lt;/p&gt;<br />
 &lt;/div&gt;<br />
&lt;/body&gt;<br />

Kolejnym krokiem jest stworzenie odpowiedniej stylizacji dla naszego kontenera, oczywiście w pliku CSS:

<br />
#container {<br />
 width: 1000px;<br />
 margin-left: auto;<br />
 margin-right: auto;<br />
}<br />

W powyższym kodzie definiujemy dla naszego identyfikatora „container” następujące właściwości:

width: 1000px // oznacza szerokość, jaką ma przyjąć cały blok

margin-left: auto; oraz margin-right: auto; // te dwie definicje muszą się zawsze pojawić ze sobą w parze. Właśnie w taki sposób przekazujemy przeglądarce instrukcję.

Innymi słowy mówimy przeglądarce „Policz marginesy z lewej i prawej strony a następnie dobierz je tak, aby mój blok był na środku ekranu, względem krawędzi przeglądarki”.

Takie użycie kodu CSS pozwoli wyrównać blok do środka, niezależnie od rozdzielczości jaką posiada użytkownik przeglądający naszą stronę.