Autor publikacji
Virtual Patriot - Administrator

vertical-align

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości vertical-align

Za pomocą właściwości vertical-align możemy określić sposób wyrównania występującego na poziomie tekstu interesującego nas elementu HTML. Wspomniane wyrównywanie dokonuje się wzdłuż wysokości elementu rodzica.

Informacje dodatkowe

każda wysokość związana z właściwością vertical-align tyczy się wysokości logicznej

wyrównywanie elementu HTML typu inline dokonywane jest między innymi na podstawie linii bazowej elementu rodzica znajdującej się w tym samym wierszu co dany element HTML typu inline

wyrównywanie elementu HTML typu inline-block dokonywane jest między innymi na podstawie linii bazowej ostatniego wiersza danego elementu HTML typu inline-block oraz linii bazowej elementu rodzica (gdy element HTML typu inline-block jest pustym elementem HTML lub gdy wartością właściwości overflow elementu HTML typu inline-block jest wartość różna od wartości visible, wtedy wyrównywanie elementu HTML typu inline-block dokonywane jest między innymi na podstawie końcowej krawędzi blokowej danego elementu HTML typu inline-block oraz linii bazowej elementu rodzica)

wyrównywanie elementu HTML typu inline-table dokonywane jest między innymi na podstawie linii bazowej pierwszego wiersza danego elementu HTML typu inline-table oraz linii bazowej elementu rodzica

Informacje techniczne o właściwości vertical-align

przeznaczenie

Ponadto nie pływający element HTML oraz nie element HTML będący elementem dzieckiem elementu HTML typu flex, inline-flex, grid lub inline-grid.

pozycja

static, relative

dziedziczenie

nie

wartość initial

baseline

wyjątki initial

sub, sup, thead, tbody, tfoot, tr, td, th

animowanie

tak, lecz tylko wartość rozmiar

Interpretacja właściwości vertical-align

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

baseline

Wyjaśnienie

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

Domyślnie występujący na poziomie tekstu element HTML wyrównywany jest do linii bazowej elementu rodzica.

vertical-align:baseline;

linia bazowa tekstu elementu HTML

Przykład

  vertical-align:baseline;
Yy przykładowy tekst span

Przykładowy element "span" został wyrównany do linii bazowej elementu "p".

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;
      }

      p {
        font-size:1.3em;
      }

      p > b {
        font-size:3em;
      }

      p > span {
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <p>
      <b>Yy</b> przykładowy tekst <span>span</span>
    </p>

  </body>
</html>

rozmiar

Wyjaśnienie

Za pomocą właściwości vertical-align oraz dowolnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić rozmiar przesunięcia od linii bazowej elementu rodzica występującego na poziomie tekstu interesującego nas elementu HTML.

Wartości dodatnie

wartości dodatnie przesuwają nad linię bazową elementu rodzica występujący na poziomie tekstu element HTML

Wartości ujemne

wartości ujemne przesuwają pod linię bazową elementu rodzica występujący na poziomie tekstu element HTML

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru wysokości wiersza elementu HTML, którego rozmiar przesunięcia od linii bazowej elementu rodzica chcemy określić

Przykład

  vertical-align:50px;
Yy przykładowy tekst span

Rozmiar przesunięcia nad linią bazową elementu "p" przykładowego elementu "span" wynosi 50 pikseli, ponieważ do wspomnianego elementu "span" została dodana właściwość "vertical-align" wraz z wartością "50px".

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;
      }

      p {
        font-size:1.3em;
      }

      p > b {
        font-size:3em;
      }

      p > span {
        vertical-align:50px;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <p>
      <b>Yy</b> przykładowy tekst <span>span</span>
    </p>

  </body>
</html>

sub

Wyjaśnienie

Za pomocą wartości sub właściwości vertical-align możemy sprawić, że występujący na poziomie tekstu interesujący nas element HTML znajdzie się nieco pod linią bazową elementu rodzica.

Przykład

  vertical-align:sub;
Yy przykładowy tekst span

Przykładowy element "span" znalazł się nieco pod linią bazową elementu "p", ponieważ do wspomnianego elementu "span" została dodana właściwość "vertical-align" wraz z wartością "sub".

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;
      }

      p {
        font-size:1.3em;
      }

      p > b {
        font-size:3em;
      }

      p > span {
        vertical-align:sub;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <p>
      <b>Yy</b> przykładowy tekst <span>span</span>
    </p>

  </body>
</html>

super

Wyjaśnienie

Za pomocą wartości super właściwości vertical-align możemy sprawić, że występujący na poziomie tekstu interesujący nas element HTML znajdzie się nieco nad linią bazową elementu rodzica.

Przykład

  vertical-align:super;
Yy przykładowy tekst span

Przykładowy element "span" znalazł się nieco nad linią bazową elementu "p", ponieważ do wspomnianego elementu "span" została dodana właściwość "vertical-align" wraz z wartością "super".

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;
      }

      p {
        font-size:1.3em;
      }

      p > b {
        font-size:3em;
      }

      p > span {
        vertical-align:super;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <p>
      <b>Yy</b> przykładowy tekst <span>span</span>
    </p>

  </body>
</html>

text-top

Wyjaśnienie

Za pomocą wartości text-top właściwości vertical-align możemy sprawić, że występujący na poziomie tekstu interesujący nas element HTML zostanie wyrównany do górnej krawędzi obszaru wiersza elementu rodzica. Mowa tu o wierszu dopasowującym się rozmiarem wysokości do rozmiaru czcionki tekstu, jaki został określony dla wspomnianego elementu rodzica.

Przykład

  vertical-align:text-top;
Yy przykładowy tekst span

Przykładowy element "span" został wyrównany do górnej krawędzi obszaru wiersza elementu "p", ponieważ do wspomnianego elementu "span" została dodana właściwość "vertical-align" wraz z wartością "text-top".

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;
      }

      p {
        font-size:2em;
      }

      p > b {
        font-size:200%;
      }

      p > span {
        vertical-align:text-top;
        font-size:50%;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <p>
      <b>Yy</b> przykładowy tekst <span>span</span>
    </p>

  </body>
</html>

text-bottom

Wyjaśnienie

Za pomocą wartości text-bottom właściwości vertical-align możemy sprawić, że występujący na poziomie tekstu interesujący nas element HTML zostanie wyrównany do dolnej krawędzi obszaru wiersza elementu rodzica. Mowa tu o wierszu dopasowującym się rozmiarem wysokości do rozmiaru czcionki tekstu, jaki został określony dla wspomnianego elementu rodzica.

Przykład

  vertical-align:text-bottom;
Yy przykładowy tekst span

Przykładowy element "span" został wyrównany do dolnej krawędzi obszaru wiersza elementu "p", ponieważ do wspomnianego elementu "span" została dodana właściwość "vertical-align" wraz z wartością "text-bottom".

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;
      }

      p {
        font-size:2em;
      }

      p > b {
        font-size:200%;
      }

      p > span {
        vertical-align:text-bottom;
        font-size:50%;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <p>
      <b>Yy</b> przykładowy tekst <span>span</span>
    </p>

  </body>
</html>

top

Wyjaśnienie

Za pomocą wartości top właściwości vertical-align możemy sprawić, że występujący na poziomie tekstu interesujący nas element HTML zostanie wyrównany do górnej krawędzi obszaru wiersza elementu rodzica. Mowa tu o wierszu dopasowującym się rozmiarem wysokości do najwyższej posiadanej treści do wyświetlenia.

Właściwość "vertical-align" wraz z wartością "top" dodana do elementu HTML typu table-cell sprawia, że treść posiadana przez ten element HTML wyrównywana jest w kierunku początkowej krawędzi blokowej obszaru zawartości tego elementu HTML.

Przykład

  vertical-align:top;
Yy przykładowy tekst span

Przykładowy element "span" został wyrównany do górnej krawędzi obszaru wiersza elementu "p", ponieważ do wspomnianego elementu "span" została dodana właściwość "vertical-align" wraz z wartością "top".

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;
      }

      p {
        font-size:2em;
      }

      p > b {
        font-size:200%;
      }

      p > span {
        vertical-align:top;
        font-size:50%;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <p>
      <b>Yy</b> przykładowy tekst <span>span</span>
    </p>

  </body>
</html>

middle

Wyjaśnienie

Za pomocą wartości middle właściwości vertical-align możemy sprawić, że środek występującego na poziomie tekstu interesującego nas elementu HTML zostanie wyrównany do linii bazowej elementu rodzica, a następnie przesunięty w górę o wartość równą połowę rozmiaru wysokości małej litery x, jaką posiada wspomniany element rodzic.

Właściwość "vertical-align" wraz z wartością "middle" dodana do elementu HTML typu table-cell sprawia, że treść posiadana przez ten element HTML jest wyśrodkowana względem początkowej oraz końcowej krawędzi blokowej obszaru zawartości tego elementu HTML.

Przykład

  vertical-align:middle;
Yy przykładowy tekst span

Przykładowy element "span" został wyśrodkowany względem linii bazowej elementu "p", ponieważ do wspomnianego elementu "span" została dodana właściwość "vertical-align" wraz z wartością "middle".

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;
      }

      p {
        font-size:2em;
      }

      p > b {
        font-size:200%;
      }

      p > span {
        vertical-align:middle;
        font-size:50%;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <p>
      <b>Yy</b> przykładowy tekst <span>span</span>
    </p>

  </body>
</html>

bottom

Wyjaśnienie

Za pomocą wartości bottom właściwości vertical-align możemy sprawić, że występujący na poziomie tekstu interesujący nas element HTML zostanie wyrównany do dolnej krawędzi obszaru wiersza elementu rodzica. Mowa tu o wierszu dopasowującym się rozmiarem wysokości do najwyższej posiadanej treści do wyświetlenia.

Właściwość "vertical-align" wraz z wartością "bottom" dodana do elementu HTML typu table-cell sprawia, że treść posiadana przez ten element HTML wyrównywana jest w kierunku końcowej krawędzi blokowej obszaru zawartości tego elementu HTML.

Przykład

  vertical-align:bottom;
Yy przykładowy tekst span

Przykładowy element "span" został wyrównany do dolnej krawędzi obszaru wiersza elementu "p", ponieważ do wspomnianego elementu "span" została dodana właściwość "vertical-align" wraz z wartością "bottom".

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;
      }

      p {
        font-size:2em;
      }

      p > b {
        font-size:200%;
      }

      p > span {
        vertical-align:bottom;
        font-size:50%;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <p>
      <b>Yy</b> przykładowy tekst <span>span</span>
    </p>

  </body>
</html>