Prawie każdy bloger spotkał się kiedyś z problemem wyśrodkowania zdjęć w swoich wpisach. Często liczne próby zmuszenia zdjęcia do ustawienia się na środku kończą się strasznym bałaganem w kodzie, a to śni się web developerom po nocach w formie koszmaru.

Aby uniknąć takich sytuacji, to właśnie web developerzy muszą przewidzieć taką sytuację i znaleźć rozwiązanie, zanim oddadzą bloga w ręce blogerów.

Z pomocą – jak w większości przypadków – przychodzi nam css.

Rozwiązanie jest proste: wystarczy odpowiednio ostylować klasę odpowiadającą za wyśrodkowanie obrazków. W Wordpressie (najbardziej popularna platforma blogowa), standardowa klasa to „aligncenter”. Dodajmy więc styl do obrazka z taką właśnie klasą:

img.aligncenter {display:block; margin: 0 auto;}

Wyjaśnijmy:

display:block – powoduje, że obrazek przestaje być elementem liniowym i "rozpycha" się na całą dostępną szerokość,
margin: 0 auto – to podzielenie pustej przestrzeni pomiędzy krawędzią obrazka, a krawędzią kontenera w którym obrazek się znajduje.

Jeśli chcemy wymusić wyśrodkowanie wszystkich obrazków na blogu nie zważając na gust blogerów w tej materii, powinniśmy powyższe style dodać do wszystkich obrazków na blogu.

"Do wszystkich" oznacza tu jednak tylko obrazki zawarte w treści wpisów. Nie chcemy przecież ruszać graficznych elementów szablonu.

Wiedząc, że wszystkie posty znajdują się w kontenerze z klasą "post" (div class="post">), umieszczamy w pliku ze stylami taki wpis:

div.post img {display:block; margin: 0 auto;}

Oczywiście nie palimy za sobą mostów i jeśli chcemy odstąpić od tej reguły, tworzymy wyjątki – odpowiednie klasy – i nadpisujemy nimi powyższe style.

Przeczytaj również:

Statyczna strona główna Wordpress

Tworzenie miniaturek stron w Wordpress