Ostatnio edytowany:

vertical-align

Autor: Virtual Patriot

Opis właściwości vertical-align

Za pomocą właściwości vertical-align możemy określić sposób pionowego wyrównania występującego na poziomie tekstu interesującego nas elementu HTML.

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

przeznaczenie
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

Opis

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 w pionie 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 w pionie 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:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

rozmiar

Opis

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 w pionie 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 wiersza elementu HTML, którego rozmiar przesunięcia w pionie od linii bazowej elementu rodzica chcemy określić

Przykład

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

Rozmiar przesunięcia w pionie 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:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

sub

Opis

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:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

super

Opis

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:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

text-top

Opis

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 w pionie 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:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

text-bottom

Opis

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 w pionie 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:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

top

Opis

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 w pionie 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.

Właściwość "vertical-align" wraz z wartością "top" dodana do komórki tabeli HTML sprawia, że treść posiadana przez komórkę tabeli HTML wyrównywana jest w pionie do górnej krawędzi obszaru zawartości tejże komórki.

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:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

middle

Opis

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 w pionie 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 komórki tabeli HTML sprawia, że treść posiadana przez komórkę tabeli HTML jest wyśrodkowana w pionie.

Przykład

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

Przykładowy element "span" został wyśrodkowany w pionie 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:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

bottom

Opis

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 w pionie do dolnej krawędzi obszaru wiersza elementu rodzica. Mowa tu o wierszu dopasowującym się rozmiarem wysokości do najwyższej posiadanej treści.

Właściwość "vertical-align" wraz z wartością "bottom" dodana do komórki tabeli HTML sprawia, że treść posiadana przez komórkę tabeli HTML wyrównywana jest w pionie do dolnej krawędzi obszaru zawartości tejże komórki.

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:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>