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.
Co znajdziesz w tym wpisie
Wyśrodkowanie obrazka i tekstu z pomocą HTML
Jak wyśrodkować obrazek w HTML?
Do wyśrodkowania obrazka 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:
<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 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 centrować obrazek z 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.0
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; }
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.0
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.0
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.0
Drugi przykład wykorzystuje z kolei technologię FLEXBOX
See the Pen
Center in container FLEX by Aura (@Julka85)
on CodePen.0
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.0
dodatkowe tagi:
pozycjonowanie obrazka lub tekstu w środku otaczającego je elementu.
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.