CSS tekstiasento

Tekstin kohdistus

text-align Ominaisuus asettaa tekstin horisontaalisen kohdistuksen.

Teksti voi olla vasemmassa- tai oikeassa-päin kohdistettu tai keskitetty.

Esimerkki näyttää tasaisen ja vasemmassa- tai oikeassa-päin kohdistetun tekstin (jos tekstin suunta on vasemmalta oikealle, oletus on vasemmassa-päin kohdistus; jos tekstin suunta on oikealta vasemmalle, se on oikeassa-päin kohdistus):

Esimerkki

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

Kokeile itse

kun text-align Asetettuna "justify" ominaisuuden jälkeen jokainen rivi venytetään, jotta jokaisella rivillä on yhtä leveä ja reunat ovat suorat (kuten lehdissä ja sanomalehdissä):

Esimerkki

div {
  text-align: justify;
}

Kokeile itse

Tekstin suunta

direction ja unicode-bidi Ominaisuus voidaan käyttää muuttamaan elementin tekstin suuntaa:

Esimerkki

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Kokeile itse

Vertikaalinen tasaus

vertical-align Ominaisuus asettaa elementin vertikaalisen tasauksen.

Tämä esimerkki näyttää, miten voit asettaa kuvien vertikaalisen tasauksen tekstissä:

Esimerkki

img.top {
  vertical-align: top;
}
img.middle {
  vertical-align: middle;
}
img.bottom {
  vertical-align: bottom;
}

Kokeile itse