Autor publikacji
Virtual Patriot - Administrator

text-align

Data publikacji
Ostatnio edytowano

Przeznaczenie 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.

Informacje dodatkowe

brak

Informacje techniczne 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

tak (animacja schodkowa)

Interpretacja właściwości text-align

Firefox

tak

Google Chrome

tak

Safari

tak

Nie interpretuje wartości match-parent.

Opera

tak

Internet Explorer

tak

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

Edge

tak

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

start

Wyjaśnienie

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:#7DCDE8;
      }
    </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

Wyjaśnienie

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:#7DCDE8;
      }
    </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

Wyjaśnienie

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:#7DCDE8;
      }
    </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

Wyjaśnienie

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:#7DCDE8;
      }
    </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

Wyjaśnienie

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:#7DCDE8;
      }
    </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

Wyjaśnienie

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:#7DCDE8;
      }
    </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>