Wyśrodkowanie tekstu w HTML: text-align, w pionie i…

Q: Jak wyśrodkować tekst w HTML?

Dodaj text-align: center do elementu, który zawiera tekst, na przykład albo regułę CSS w rodzaju h1 { text-align: center; }. Wyśrodkowuje każdą linię tekstu i treść liniową w tym elemencie.

Q: Jak wyśrodkować tekst w pionie?

Zrób z kontenera flexboksa: display: flex; align-items: center; (dodaj justify-content: center, żeby wyśrodkować też w poziomie). Dla jednej linii w pudełku o stałej wysokości działa też line-height równe wysokości.

Q: Czy znacznik jest nadal poprawny?

Nie. i atrybut align="center" są przestarzałe. Przeglądarki nadal je renderują na potrzeby starych stron, ale nowy kod powinien używać text-align: center w CSS.

Q: Jak zrobić wcięcie tekstu w HTML?

Użyj CSS. text-indent: 2em wcina pierwszą linię akapitu, a padding-inline-start: 2em lub margin-inline-start: 2em wcina cały blok. Spacje lub w tekście nie dają niezawodnego wcięcia.

Jak wyśrodkować tekst w HTML

Użyj właściwości CSS text-align: center na elemencie, który zawiera tekst:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center text</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { text-align: center; }
    .center { text-align: center; }
  </style>
</head>
<body>
  <h1>A centered heading</h1>
  <p class="center">This paragraph is centered with a class.</p>
  <p style="text-align: center">This one uses an inline style.</p>
  <p>This paragraph is not centered.</p>
</body>
</html>

text-align wyśrodkowuje każdą linię w elemencie, łącznie z elementami liniowymi, takimi jak linki, obrazki i przyciski. Jest dziedziczona, więc ustawienie jej na kontenerze wyśrodkowuje tekst we wszystkim, co jest w środku.

Na bloku, nie na spanie

text-align działa na kontenerach blokowych: <p>, <div>, nagłówkach, komórkach tabeli. Na <span> czy <a> nie robi nic, bo element liniowy jest tylko tak szeroki jak jego tekst i nie ma w nim miejsca na wyśrodkowanie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align on inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; margin-bottom: 8px; padding: 4px; }
    .on-span span { text-align: center; background: #fef3c7; }
    .on-div { text-align: center; border-color: #16a34a; }
    .on-div span { background: #dcfce7; }
  </style>
</head>
<body>
  <div class="on-span"><span>text-align on the span: no effect</span></div>
  <div class="on-div"><span>text-align on the parent div: centered</span></div>
</body>
</html>

Rozwiązanie jest zawsze takie samo: przenieś text-align: center na blok nadrzędny.

Blok na środku, linie od lewej

W akapicie z kilkoma liniami całkowicie wyśrodkowany tekst trudno się czyta, bo każda linia zaczyna się w innym miejscu. Częsty wzorzec to wyśrodkowanie bloku na stronie i wyrównanie jego tekstu do początku:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered column</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .column { max-width: 320px; margin-inline: auto; border: 2px dashed #2563eb; padding: 8px; }
    .column h2 { text-align: center; margin-top: 0; }
  </style>
</head>
<body>
  <div class="column">
    <h2>Centered title</h2>
    <p>This column sits in the middle of the page, but its lines of text start at the same edge, which keeps longer text easy to read.</p>
  </div>
</body>
</html>

margin-inline: auto wyśrodkowuje blok, który ma szerokość, a text-align wyśrodkowuje linie w jego wnętrzu. Wyśrodkowanie pudełek (flexboksem, gridem lub marginesami) opisuje strona wyśrodkowanie diva.

Wyśrodkowanie tekstu w pionie

text-align działa tylko w poziomie. Aby wyśrodkować tekst w pionie wewnątrz pudełka, zrób z pudełka kontener flex:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical center</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { height: 140px; background: #e5e7eb; border-radius: 8px; margin-bottom: 12px; }
    .flex { display: flex; align-items: center; justify-content: center; text-align: center; }
    .single { height: 60px; line-height: 60px; text-align: center; background: #dbeafe; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="box flex">Centered both ways<br>with flexbox</div>
  <div class="single">One line with line-height</div>
</body>
</html>

align-items: center wyśrodkowuje w pionie, justify-content: center w poziomie, a text-align: center nadal wyśrodkowuje linie względem siebie, gdy jest ich kilka. Sztuczka z line-height działa tylko dla jednej linii tekstu w pudełku o znanej wysokości.

Wszystkie wartości text-align

Wartość	Efekt
`start` (domyślna)	Linie zaczynają się przy krawędzi początkowej: po lewej w polskim, po prawej w arabskim i hebrajskim
`end`	Linie kończą się przy krawędzi końcowej
`center`	Linie wyśrodkowane
`justify`	Linie rozciągnięte do obu krawędzi (poza ostatnią)
`left`, `right`	Zawsze do lewej albo zawsze do prawej, niezależnie od języka

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align values</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 260px; border: 2px solid #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <p style="text-align: start">start: the default for most text.</p>
  <p style="text-align: end">end: lines hug the end edge.</p>
  <p style="text-align: justify">justify: the spaces between words stretch so every full line reaches both edges of the box.</p>
  <p dir="rtl" style="text-align: start">start in a right to left paragraph</p>
</body>
</html>

Wybieraj start i end zamiast left i right: dla języków pisanych od prawej do lewej odwracają się automatycznie, co pokazuje ostatnie pudełko.

Stary znacznik center

Stare strony wyśrodkowują tekst przez <center> albo atrybut align:

<center>Old way</center>
<p align="center">Also old</p>

Oba są przestarzałe. Przeglądarki nadal je renderują, żeby stare strony się nie psuły, ale w obecnym HTML są niepoprawne i mieszają układ z kodem. Używaj text-align: center w CSS.

Wcięcia tekstu

HTML nie ma znacznika wcięcia, a wpisane spacje się zwijają (patrz spacje w HTML). Wcięcia robi się w CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Indent</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 420px; }
    .first-line { text-indent: 2em; }
    .block { padding-inline-start: 2em; border-inline-start: 3px solid #2563eb; }
    .hanging { padding-inline-start: 2em; text-indent: -2em; }
  </style>
</head>
<body>
  <p class="first-line">text-indent moves only the first line of the paragraph, the way books start a new paragraph. The following lines start at the edge.</p>
  <p class="block">padding-inline-start indents every line of the block.</p>
  <p class="hanging">A hanging indent: the first line sticks out and the rest is indented, as in a bibliography entry.</p>
</body>
</html>

Wcięcie	CSS
Tylko pierwsza linia	`text-indent: 2em`
Cały blok	`padding-inline-start: 2em` lub `margin-inline-start: 2em`
Wysunięte (pierwsza linia na zewnątrz)	`padding-inline-start: 2em; text-indent: -2em`

em wiąże wcięcie z rozmiarem czcionki, więc skaluje się razem z tekstem.

Częste błędy

text-align na elemencie liniowym. Umieść go na bloku nadrzędnym.
Oczekiwanie, że text-align wyśrodkuje pudełko. Wyśrodkowuje tekst i treść liniową, a nie blok o danej szerokości. Do pudełek użyj margin-inline: auto lub flexboksa.
Używanie <center> lub align="center". Przestarzałe. Użyj CSS.
Wyśrodkowywanie długich akapitów. Wyśrodkowuj nagłówki i krótkie linie; tekst główny wyrównuj do początku.
Wcięcia przez   lub spacje. Użyj text-indent lub paddingu.

Najczęściej zadawane pytania

Jak wyśrodkować tekst w HTML?

Dodaj text-align: center do elementu, który zawiera tekst, na przykład <p style="text-align: center"> albo regułę CSS w rodzaju h1 { text-align: center; }. Wyśrodkowuje każdą linię tekstu i treść liniową w tym elemencie.

Dlaczego text-align: center nie działa na moim spanie?

Span jest elementem liniowym, więc jest tylko tak szeroki jak jego tekst i nie ma w nim miejsca na wyśrodkowanie. Umieść text-align: center na bloku nadrzędnym (<p> lub <div> wokół niego) albo ustaw spanowi display: block.

Jak wyśrodkować tekst w pionie?

Zrób z kontenera flexboksa: display: flex; align-items: center; (dodaj justify-content: center, żeby wyśrodkować też w poziomie). Dla jednej linii w pudełku o stałej wysokości działa też line-height równe wysokości.

Czy znacznik <center> jest nadal poprawny?

Nie. <center> i atrybut align="center" są przestarzałe. Przeglądarki nadal je renderują na potrzeby starych stron, ale nowy kod powinien używać text-align: center w CSS.

Jak zrobić wcięcie tekstu w HTML?

Użyj CSS. text-indent: 2em wcina pierwszą linię akapitu, a padding-inline-start: 2em lub margin-inline-start: 2em wcina cały blok. Spacje lub   w tekście nie dają niezawodnego wcięcia.

Powiązane zagadnienia