Wyśrodkowanie obrazka lub tekstu na stronie z pomocą HTML i CSS

Czas czytania: 2 minut

Wyśrodkowanie tekstu lub ilustracji na stronie, witrynie internetowej jest stosunkowo prostą czynnością.

I praktycznie jak zawsze istnieje kilka sposobów dzięki, którym możemy to osiągnąć. Na początek pokażę wam jak zrobić to z pomocą HTML (przydatne przy mailingach – jeżeli tworzymy je sami). Następnie zrobimy to samo, tyle że z pomocą CSS.

Wyśrodkowanie obrazka i tekstu z pomocą HTML

Jak wyśrodkować obraz w HTML?

Do wyśrodkowania obrazka, zdjęcia lub tekstu w HTML służy ten sam znacznik <center>. W celu skorzystania z niego wystarczy obiekt, który chcemy wycentrować względem szerokości strony umieścić pomiędzy otwarciem a zamknięciem znacznika.
Przykład:

<center><img src="Ścieżka dostępu do obrazka" alt="Tekst alternatywny" /></center>

Gdzie w miejscu “Ścieżka dostępu do obrazka” wpisujemy lokalizację obrazka. Analogicznie wyśrodkujemy tekst.

---

Jak wyśrodkować tekst w HTML?

Ten sam znacznik <center> przyda nam się do wyrównania po środku tekstu
Przykładowy tekst:

Przykładowy wyśrodkowany tekst

<center>Przykładowy wyśrodkowany tekst</center>

Jak widać w HTML wystarczy jedynie jeden znacznik by oba obiekty znalazły się po środku.

---

Wyśrodkowanie obiektów z pomocą CSS

W CSS (style kaskadowe) wycentrowanie obrazka w istotny sposób różni się od wyśrodkowania tekstu. Jesteśmy zmuszeni wykorzystać do tego celu dwie różne właściwości.

Jak środkować obrazek w CSS?

W celu wyśrodkowania obrazka (lub innego obiektu blokowego jak np. div) dodajemy do niego właściwość:

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

Powyższy przykładowy kod odnosi się do grafiki a tak wygląda jej kod HTML:

See the Pen center by Aura (@Julka85) on CodePen.

Centrowanie Tekstu na stronie – text-align

Jak wspomniałam wyśrodkowanie tekstu będzie wyglądało w przypadku użycia CSS inaczej

.textcenter {text-align:center;}
p {text-align:center;}
h3 {text-align:center;}

---

Wyśrodkowany kontener w pionie z tekstem w środku

Teraz wam pokażę w jaki sposób wyśrodkować w obiekty w pionie. Ta sama metoda powinna działać zarówno na tekst jak i obrazek.

See the Pen Center top by Aura (@Julka85) on CodePen.

Jak widać do wyśrodkowania w pionie użyłam Flexbox. Konkretnie właściwości:

align-self: center;

Nieco więcej możecie o tym przeczytać we wpisie o Flexbox.

Wyśrodkowanie tekstu:

See the Pen Center text on by Aura (@Julka85) on CodePen.

Centrowanie obrazka (pudełka) względem wysokości i szerokości strony / kontenera

A teraz coś bardziej skomplikowanego. Czyli jak wyśrodkować obrazek w pionie i poziomie względem kontenera. Takim kontenerem może być oczywiście cała strona, ale częściej będzie to jakiś <div>, <section> lub <article>.

Na początek skorzystamy z position:absolute;

See the Pen Center in container by Aura (@Julka85) on CodePen.

Drugi przykład wykorzystuje z kolei technologię FLEXBOX

See the Pen Center in container FLEX by Aura (@Julka85) on CodePen.

Oba powyższe przykłady mają zbliżone podstawowe ustawienia. Efekt końcowy na pierwszy rzut oka jest też identyczny. To na jaką metodę się zdecydujemy zależy tylko i wyłącznie od nas. Jednak warto mieć na uwadze, że część przeglądarek może mieć jeszcze problemy z obsługą Flexbox.

Wyśrodkowanie tła

O ustawianiu tła pisałam w tym wpisie -> Ustawianie pozycji tła na stronie internetowej

See the Pen Untitled by Aura (@Julka85) on CodePen.

dodatkowe tagi:
pozycjonowanie obrazka lub tekstu w środku otaczającego je elementu.