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

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 do tej krawędzi obszaru zawartości elementu HTML, od której rozpoczęło się pisanie wspomnianego tekstu.

Przykład

  text-align:start;
tekst tego elementu "div" został wyrównany do lewej krawędzi obszaru zawartości 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 do lewej krawędzi obszaru zawartości 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 do tej krawędzi obszaru zawartości elementu HTML, która jest krawędzią przeciwną do krawędzi, od której rozpoczęło się pisanie wspomnianego tekstu.

Przykład

  text-align:end;
tekst tego elementu "div" został wyrównany do prawej krawędzi obszaru zawartości 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 do prawej krawędzi obszaru zawartości 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 do tej krawędzi obszaru zawartości elementu HTML, która znajduje się po lewej stronie względem posiadanego przez element HTML kierunku pisania tekstu.

Przykład

  text-align:left;
tekst tego elementu "div" został wyrównany do lewej krawędzi obszaru zawartości 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 do lewej krawędzi obszaru zawartości 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 względem tych krawędzi obszaru zawartości elementu HTML, które występują po obu stronach posiadanego przez element HTML kierunku pisania tekstu.

Przykład

  text-align:center;
tekst tego elementu "div" został wyśrodkowany względem lewej oraz prawej krawędzi obszaru zawartości 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 względem lewej oraz prawej krawędzi obszaru zawartości 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) do tych krawędzi obszaru zawartości elementu HTML, które występują po obu stronach posiadanego przez element HTML kierunku pisania tekstu.

Przykład

  text-align:justify;
tekst tego elementu "div" został wyrównany do lewej oraz prawej krawędzi obszaru zawartości 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 do lewej oraz prawej krawędzi obszaru zawartości 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 rodzica tego elementu "div" 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 rodzica tego elementu "div" jest wartość domyślna, czyli wartość "start"
    </div>

  </body>
</html>