Kurs z HTML dla początkujących

Wyśrodkowanie obrazka lub tekstu w HTML i CSS

tutoriale

Kategoria wpisu Kurs HTML, Kursy Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 2 minutes

Wyśrodkowanie tekstu lub ilustracji na stronie internetowej jest jedną z najpopularniejszych metod formatowania dokumentu.

 Istnieje kilka sposobów dzięki, którym możemy uzyskać tego typu efekt.

Wyśrodkowanie obrazka w HTML

Do wyśrodkowania obrazka lub tekstu w HTML służy 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:

safari

Gdzie w miejscu „Ścieżka dostępu do obrazka” wpisujemy lokalizację obrazka a „Tekst alternatywny” tekst, który pokaże się w przypadku jeśli pod podanym adresem nic nie będzie.

Wyśrodkowanie tekstu w HTML

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

Przykładowy wyśrodkowany tekst

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

Wyśrodkowanie za 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.

Centrowanie obrazka

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

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

Centrowanie Tekstu na stronie

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

Przykładowy wyśrodkowany tekst

Wyśrodkowanie w poziomie za pomocą CSS


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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *