HTML/CSS, Poradniki webdevelopera

Jak wyśrodkować tekst w HTML?

0

Podczas codziennej pracy możesz spotkać się z potrzebą wyśrodkowania treści na swojej stronie internetowej. Po przeczytaniu tego artykułu, dowiesz się jak prawidłowo pozycjonować treści oraz skąd wynika takie podejście.

Wyśrodkowanie Tekstu HTML za pomocą CSS

Do wyśrodkowania tekstu używamy właściwości:

text-align: center;

Aby prawidłowo wykorzystać właściwość, należy dodać ją w danym selektorze (w sekcji css), tak jak na podanym poniższym przykładzie:

.center{text-align:center;}

Dobre praktyki

Wyśrodkowanie tekstu powinniśmy zawsze dokonywać za pomocą CSS. Jeszcze kilka lat temu do wyśrodkowania elementów html używano tagów HTML <center></center> – dziś ta zasada odchodzi do lamusa.

Jednym z powodów odejścia od tej metody jest zbędne powielanie znaczników <center></center>. Zgodnie z dobrymi praktykami, lepiej jest utworzyć jedną klasę, która ma zdefiniowane wyśrodkowanie, a następnie wykorzystywać ją w tagach HTML – jest to podejście bardziej przejrzyste i oddziela nam oscylowanie od tagów.

Przedstawiamy przykład, który powinien jeszcze bardziej zobrazować sytuację:

Stara metoda:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Wyśrodkowanie treści</title>
</head>
<body>
<center><p> Witaj akapit 1</p></center>
<center><p> Witaj akapit 2</p></center>
<center><p> Witaj akapit 3</p></center>
</body>
</html>
 

Aktualna metoda:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Wyśrodkowanie treści</title>
<style>
.center{text-align:center;}
</style>
</head>
<body>
<p class="center">Witaj akapit 1</p>
<p class="center">Witaj akapit 2</p>
<p class="center">Witaj akapit 3</p>
</body>
</html>
 

Podsumowanie

Warto pamiętać, że oscylowanie strony internetowej to pewnego rodzaju sztuka, która ma pewne standardy. Nie powielajmy rozwiązań „starych dziejów” (<center></center>), które docelowo mogą być w najbliższym czasie deprecjonowane(niewspierane bądź usunięte).

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *