Jak wyśrodkować obrazek w HTML? Poznaj metody CSS

Obrazek ustawiony kilka pikseli w lewo od reszty treści potrafi zepsuć wygląd całej strony. Wyśrodkowanie grafiki w HTML najczęściej wymaga jednej reguły CSS, ale właściwa metoda zależy od tego, czy centrowany ma być sam obraz, jego kontener, czy również położenie w pionie. Poniżej pokazuję sprawdzone rozwiązania, ich ograniczenia oraz błędy, przez które obraz mimo wszystko nie trafia na środek.

Jak wyśrodkować obrazek HTML bez zbędnych sztuczek

Sam znacznik odpowiada za wyświetlenie grafiki, ale nie decyduje o jej położeniu względem strony. Za układ odpowiada CSS, dlatego właśnie tam najlepiej umieścić reguły dotyczące wyrównania. W praktyce najczęściej wybieram jedną z trzech metod: text-align, automatyczne marginesy albo Flexbox.

Najpierw trzeba ustalić, co dokładnie oznacza „środek”. Może chodzić o środek w poziomie względem szerokości kontenera, o środek w pionie w wysokim bloku albo o ustawienie kilku elementów obok siebie. Te sytuacje wyglądają podobnie, ale wymagają nieco innego kodu.

Najprostsze centrowanie poziome za pomocą CSS

Obraz jako element liniowy

Jeżeli obraz ma pozostać elementem liniowym, wystarczy ustawić wyrównanie tekstu na jego rodzicu. Obraz zostanie potraktowany podobnie jak tekst znajdujący się w tym samym akapicie.

.obrazek {
  text-align: center;
}

To rozwiązanie jest szybkie i dobrze sprawdza się przy pojedynczej grafice w akapicie, na przykład ilustracji w artykule. Trzeba jednak pamiętać, że text-align działa na zawartość kontenera, a nie bezpośrednio na sam element obrazka.

Automatyczne marginesy dla elementu blokowego

Drugą popularną metodą jest zamiana obrazu na element blokowy i ustawienie równych marginesów bocznych. To mój częsty wybór, gdy obraz ma być samodzielnym elementem layoutu.

.grafika-centralna {
  display: block;
  margin-inline: auto;
}

W starszym zapisie można użyć także margin: 0 auto;. Właściwość margin-inline jest czytelniejsza, bo mówi wprost o marginesach w osi poziomej. Warunek jest jeden: obraz musi mieć szerokość mniejszą niż kontener. Jeśli zajmuje całe dostępne 100%, nie będzie widać efektu centrowania.

Możesz nadać mu konkretny rozmiar albo ograniczyć szerokość maksymalną:

.grafika-centralna {
  display: block;
  width: 640px;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

Reguła max-width: 100% chroni układ przed przepełnieniem na telefonach. Bez niej obraz o szerokości 640 pikseli może wyjść poza węższy ekran, a użytkownik zobaczy poziome przewijanie.

Flexbox i Grid, gdy obraz ma być wyśrodkowany w kontenerze

Centrowanie w poziomie i pionie przez Flexbox

Gdy obraz znajduje się w banerze, karcie albo sekcji o określonej wysokości, najwygodniejszy jest Flexbox. Pozwala ustawić element dokładnie w środku obu osi.

.panel {
  min-height: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.panel img {
  max-width: 100%;
  height: auto;
}

justify-content: center centruje element w głównej osi, a align-items: center w osi poprzecznej. Przy domyślnym kierunku wierszowym daje to centrowanie poziome i pionowe. W praktyce ta metoda jest bardziej uniwersalna niż samo text-align, zwłaszcza gdy kontener zawiera także podpis lub dodatkowe elementy.

Przeczytaj również: Kod HTML strony: Jak go sprawdzić i co z niego wyczytać?

Grid przy prostym układzie jednego elementu

Jeśli kontener ma przede wszystkim ułożyć jeden element centralnie, CSS Grid pozwala zapisać to bardzo krótko:

.panel {
  display: grid;
  place-items: center;
  min-height: 320px;
}

Właściwość place-items ustawia wyrównanie w obu osiach jednocześnie. Sam stosuję Grid częściej przy całych układach siatkowych, a Flexbox przy pojedynczym obrazie lub niewielkim zestawie elementów. Obie techniki są poprawne, lecz nie ma potrzeby używać Gridu tylko dlatego, że jest nowszy.

Porównanie metod i wybór właściwego rozwiązania

Jeżeli tworzysz zwykły artykuł, zacznij od automatycznych marginesów albo text-align: center. Flexbox i Grid zostaw dla sytuacji, w których obraz jest częścią większego komponentu. Prostszy kod łatwiej później utrzymać, szczególnie w projekcie rozwijanym przez kilka osób.

Responsywność i semantyczne opakowanie obrazka

Wyśrodkowanie to tylko połowa zadania. Obraz powinien również dobrze wyglądać na ekranie o szerokości 360 pikseli, na tablecie i na dużym monitorze. Najbezpieczniejsza baza wygląda tak:

img {
  max-width: 100%;
  height: auto;
}

height: auto zachowuje proporcje grafiki, a max-width: 100% nie pozwala jej wyjść poza rodzica. Nie ustawiaj sztywnej wysokości bez powodu, bo obraz może zostać rozciągnięty albo przycięty.

W przypadku ilustracji z podpisem warto użyć elementów

.ilustracja {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.ilustracja img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

Opis w atrybucie alt powinien informować, co przedstawia grafika, jeśli ma ona znaczenie dla treści. Przy obrazie czysto dekoracyjnym pusty zapis alt="" jest lepszy niż przypadkowy tekst, który czytnik ekranu odczyta użytkownikowi.

Dlaczego obraz nadal nie jest na środku

Najczęstszy błąd polega na wpisaniu text-align: center bezpośrednio do img. Ta właściwość wyrównuje zawartość elementu, więc na samym obrazku zwykle nie daje oczekiwanego efektu. Przenieś ją do rodzica albo użyj display: block z automatycznymi marginesami.

Druga pułapka to margin: auto bez ustawienia elementu blokowego. Obraz domyślnie zachowuje się jak element liniowy, dlatego bez dodatkowej reguły marginesy mogą nie zadziałać tak, jak oczekujesz. W takim przypadku dodaj display: block i sprawdź, czy rodzic ma większą szerokość niż obraz.

Nie używaj też przestarzałego znacznika

Jeżeli centrowanie nie działa mimo poprawnego kodu, sprawdź jeszcze style nadrzędnych elementów. Reguły float, nietypowe szerokości, pozycjonowanie absolutne albo konflikt z frameworkiem mogą zmienić zachowanie obrazu. W narzędziach deweloperskich przeglądarki szybko zobaczysz, która reguła faktycznie wygrywa.

Najpraktyczniejszy wzorzec do zapamiętania

Dla zwykłego obrazka w artykule najczęściej wystarczy taki zestaw:

.obrazek {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

Ten wzorzec centruje grafikę poziomo, zachowuje jej proporcje i nie pozwala jej wyjść poza ekran. Gdy potrzebujesz umieścić ją w środku wysokiego banera, wybierz Flexbox. Najważniejsze jest dopasowanie metody do układu, a nie zapamiętanie jednej magicznej reguły CSS.