CSS vertical-align ominaisuus

Kurssivihjeet:

Määritelmä ja käyttö

vertical-align-ominaisuus asettaa elementin vertikaalisen tasauksen.

Kuvaus

Tämä ominaisuus määrittää rivinäytölle elementin pohjan suhteen elementin omalle riville. Sallitaan negatiiviset pituusarvot ja prosenttiosuudet. Tämä voi tehdä elementistä matalamman sen sijaan, että se nostaa sitä. Taulukkokelsoissa tämä ominaisuus määrittää solun sisällön tasauksen solukkeessa.

Lisäksi:CSS teksti

CSS-opas:HTML DOM -viittausopas:

verticalAlign-ominaisuus

Esimerkki

Tasataan kuvaa pystysuoraan:
  img
  {
  vertical-align:text-top;

}

Kokeile itse

CSS-käyttötapauksetlengthvertical-align: baseline|

Ominaisuuden arvo |sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

Arvo Kuvaus
Baseline Oletus. Elementti sijoitetaan vanhemman elementin tasoon.
sub Tasataan teksti alas
super Tasataan teksti ylös
top Tasataan elementin yläreuna rivin korkeimmalla elementin yläreunaan
text-top Tasataan elementin yläreuna vanhemman elementin kirjasinkulman yläreunaan
middle Sijoitetaan tämä elementti keskelle vanhemman elementtiä.
bottom Tasataan elementin yläreuna rivin korkeimmalla elementin yläreunaan.
text-bottom Tasataan elementin alareuna vanhemman elementin kirjasinkulman alareunaan.
length 　
% Sijoitetaan tämä elementti käyttämällä "line-height"-ominaisuuden prosenttiosuutta. Sallitaan negatiiviset arvot.
inherit Määritellään, että vertical-align-ominaisuuden arvo pitäisi periytyä vanhemmalta elementiltä.

Tekninen yksityiskohta

Oletusarvo: Baseline
Perintä: ei
Versio: CSS1
JavaScript-käyttötapaukset: object.style.verticalAlign="bottom"

Lisää esimerkkejä

Pystysuuntainen kuvien tasaus
Tämä esimerkki näyttää, kuinka kuvia voidaan sijoittaa pystysuoraan tekstin yhteydessä.

Selaimen tuki

Taulukossa olevat numerot mainitsevat ensimmäisen selaimen version, joka tukee kyseistä ominaisuutta täysin.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 4.0