Aby wyśrodkować obrazek w HTML, można wykorzystać kilka różnych technik – zarówno proste metody wbudowane w HTML, jak i bardziej nowoczesne i elastyczne rozwiązania za pomocą CSS. Poniżej znajdziesz szczegółowy poradnik z przykładami odpowiednimi do różnych zastosowań na stronie internetowej.
Wyśrodkowanie obrazka za pomocą znacznika <center> (niezalecane)
Dawniej do wyśrodkowania grafik (i dowolnych innych elementów) używano znacznika <center> –
<center> <img src="sciezka-do-obrazka.jpg" alt="Opis obrazka"> </center> Uwaga – znacznik <center> jest przestarzały (niezalecany w nowoczesnym kodzie HTML5). Obecnie do stylizacji należy używać CSS, jednak taka metoda nadal działa w wielu przeglądarkach.
Wyśrodkowanie obrazka za pomocą CSS – text-align: center
Najbardziej uniwersalna i zgodna ze standardami metoda polega na użyciu CSS, gdzie obrazek jest elementem liniowo-blokowym (inline-block).
Przykład –
<div style="text-align: center;"> <img src="obrazek.jpg" alt="Opis obrazka"> </div> Wyjaśnienie:
- Właściwość
text-align: centerzastosowana do elementu nadrzędnego sprawia, że wszystkie elementy wewnątrz, które są typu inline lub inline-block (np. tekst, obrazki), są wyśrodkowane w poziomie.
Wyśrodkowanie obrazka za pomocą margin: auto i określonej szerokości
W przypadku, gdy chcesz wyśrodkować obrazek jako blok (np. gdy obrazek powinien zajmować konkretną przestrzeń), ustaw go jako display: block i przypisz marginesy automatyczne:
<img src="obrazek.jpg" alt="Opis obrazka" style="display: block; margin-left: auto; margin-right: auto; width: 50%;"> display: block– zmienia obrazek na element blokowy;margin-left: auto; margin-right: auto;– automatycznie wyśrodkowuje cały blok w obrębie rodzica;widthmożesz ustawić, aby ograniczyć szerokość obrazka w stosunku do kontenera.
Wyśrodkowanie z użyciem nowoczesnych technik CSS (flexbox, grid)
Flexbox
Flexbox to bardzo elastyczna metoda, szczególnie przy layoutach responsywnych.
<div style="display: flex; justify-content: center;"> <img src="obrazek.jpg" alt="Opis obrazka"> </div> display: flex– sprawia, że kontener stosuje model flexbox;justify-content: center– wyśrodkowuje wszystkie elementy dzieci poziomo.
Grid
Podobnie działa CSS Grid:
<div style="display: grid; place-items: center;"> <img src="obrazek.jpg" alt="Opis obrazka"> </div> place-items: centerustawia wyśrodkowanie zarówno pionowe, jak i poziome.
Wyśrodkowanie oraz podpis obrazka
Często potrzeba wyśrodkować nie tylko obrazek, ale też podpis pod nim (tzw. caption).
Przykład –
<div style="text-align: center;"> <img src="obrazek.jpg" alt="Opis obrazka"><br> <span>Podpis obrazka</span> </div> Można również zastosować element semantyczny <figure>:
<figure style="text-align: center;"> <img src="obrazek.jpg" alt="Opis obrazka"> <figcaption>Podpis obrazka</figcaption> </figure> Kiedy jaką metodę wybrać?
| Metoda | Zastosowanie | Plusy | Minusy |
|---|---|---|---|
<center> |
Proste strony, starsze projekty | Łatwość użycia | Przestarzały, niezalecany |
text-align: center |
Zdjęcia inline i proste layouty | Kompatybilność, prostota | Nie działa na elementy block |
margin: auto + display: block |
Obrazki blokowe o określonej szerokości | Kontrola szerokości, nowoczesność | Konieczność stylowania obrazu |
| Flexbox / CSS Grid | Responsywność, złożone layouty | Duża elastyczność, obsługa również pionowego center | Wymaga zrozumienia CSS |
Podsumowanie
- Do prostych zastosowań najwygodniejsze jest otoczenie obrazka
<div style="text-align:center">...</div>; - W projektach nowoczesnych oraz przy bardziej złożonych layoutach znacznie większe możliwości oferują Flexbox i CSS Grid;
- Stosowanie samego znacznika
<center>odradza się na rzecz rozwiązań CSS.
Dobór metody zależy od kontekstu i potrzeb – w małych projektach metodę z text-align: center można uznać za najwygodniejszą, a w większych layoutach warto sięgnąć po Flexbox lub Grid.
