Ostatnio edytowany:

text-align

Autor: Virtual Patriot

Opis właściwości text-align

Za pomocą właściwości text-align możemy określić sposób wyrównania tekstu interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości text-align

przeznaczenie

element HTML tworzący blok treści

pozycja

dowolna

dziedziczenie

tak

wartość initial

start (lub left dla tych przeglądarek internetowych, które nie interpretują wartości start)

wyjątki initial

caption, th

animowanie

nie (animacja nieciągła)

Interpretacja właściwości text-align

Firefox

tak

Google Chrome

tak

Nie interpretuje wartości match-parent.

Safari

tak

Nie interpretuje wartości start, end oraz match-parent.

Opera

tak

Nie interpretuje wartości match-parent.

Internet Explorer

tak

Nie interpretuje wartości start, end oraz match-parent.

Edge

tak

Nie interpretuje wartości match-parent.

Opis wartości właściwości text-align

start

Opis

Wartość start jest domyślną wartością właściwości text-align.

Domyślnie tekst elementu HTML wyrównywany jest w obszarze zawartości elementu HTML w kierunku początkowej krawędzi liniowej elementu HTML.

Przykład

  text-align:start;
tekst tego elementu "div" został wyrównany w obszarze zawartości tego elementu "div" w kierunku początkowej krawędzi liniowej tego elementu "div"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div" został wyrównany w obszarze zawartości tego elementu "div" w kierunku początkowej krawędzi liniowej tego elementu "div"
    </div>

  </body>
</html>

end

Opis

Za pomocą wartości end właściwości text-align możemy sprawić, że tekst interesującego nas elementu HTML zostanie wyrównany w obszarze zawartości elementu HTML w kierunku końcowej krawędzi liniowej elementu HTML.

Przykład

  text-align:end;
tekst tego elementu "div" został wyrównany w obszarze zawartości tego elementu "div" w kierunku końcowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align" wraz z wartością "end"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-align:end;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div" został wyrównany w obszarze zawartości tego elementu "div" w kierunku końcowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align" wraz z wartością "end"
    </div>

  </body>
</html>

left

Opis

Za pomocą wartości left właściwości text-align możemy sprawić, że tekst interesującego nas elementu HTML zostanie wyrównany w obszarze zawartości elementu HTML w kierunku lewej krawędzi liniowej elementu HTML.

Przykład

  text-align:left;
tekst tego elementu "div" został wyrównany w obszarze zawartości tego elementu "div" w kierunku lewej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align" wraz z wartością "left"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-align:left;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div" został wyrównany w obszarze zawartości tego elementu "div" w kierunku lewej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align" wraz z wartością "left"
    </div>

  </body>
</html>

center

Opis

Za pomocą wartości center właściwości text-align możemy sprawić, że tekst interesującego nas elementu HTML zostanie wyśrodkowany w obszarze zawartości elementu HTML względem obu krawędzi liniowych elementu HTML.

Przykład

  text-align:center;
tekst tego elementu "div" został wyśrodkowany w obszarze zawartości tego elementu "div" względem początkowej oraz końcowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align" wraz z wartością "center"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-align:center;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div" został wyśrodkowany w obszarze zawartości tego elementu "div" względem początkowej oraz końcowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align" wraz z wartością "center"
    </div>

  </body>
</html>

justify

Opis

Za pomocą wartości justify właściwości text-align możemy sprawić, że tekst interesującego nas elementu HTML zostanie wyrównany (wyjustowany) w obszarze zawartości elementu HTML w kierunku obu krawędzi liniowych elementu HTML.

Tekst występujący w ostatnim wierszu elementu HTML lub występujący w wierszu elementu HTML zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii nie zostanie wyjustowany. Aby określić sposób wyrównania wspomnianego tekstu należy skorzystać z właściwości text-align-last.

Przykład

  text-align:justify;
tekst tego elementu "div" został wyrównany w obszarze zawartości tego elementu "div" w kierunku początkowej oraz końcowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align" wraz z wartością "justify"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-align:justify;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div" został wyrównany w obszarze zawartości tego elementu "div" w kierunku początkowej oraz końcowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align" wraz z wartością "justify"
    </div>

  </body>
</html>

match-parent

Opis

Za pomocą wartości match-parent właściwości text-align możemy sprawić, że wartość właściwości text-align interesującego nas elementu HTML zostanie odziedziczona od elementu rodzica. Ponadto, gdy wartością właściwości text-align elementu rodzica jest wartość start, wtedy dziedziczoną wartością jest wartość left, natomiast gdy wartością właściwości text-align elementu rodzica jest wartość end, wtedy dziedziczoną wartością jest wartość right.

Przykład

  text-align:match-parent;
wartością właściwości "text-align" tego elementu "div" jest wartość "left", ponieważ do tego elementu "div" została dodana właściwość "text-align" wraz z wartością "match-parent", a wartością właściwości "text-align" elementu "body" jest wartość domyślna, czyli wartość "start"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-align:match-parent;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      wartością właściwości "text-align" tego elementu "div" jest wartość "left", ponieważ do tego elementu "div" została dodana właściwość "text-align" wraz z wartością "match-parent", a wartością właściwości "text-align" elementu "body" jest wartość domyślna, czyli wartość "start"
    </div>

  </body>
</html>