CSS text-align-ominaisuus

määrittely ja käyttö

text-align-ominaisuus määrittelee elementin sisällä olevan tekstin horisontaalisen tasauksen.

Tämä ominaisuus asettaa lohko-ominaisuuden tekstin horisontaalisen tasauksen määrittämällä, mihin pisteeseen rivejä vastaanotetaan. Sallimalla käyttäjäagentin säätää kirjainten ja sanojen välisiä välilyöntejä, voidaan tukea arvoa justify; eri käyttäjäagentit voivat saada erilaisia tuloksia.

Katso myös:

CSS-opas:CSS teksti

HTML DOM -viittausopas:textAlign-ominaisuus

esimerkki

Aseta h1, h2, h3-elementtien tekstin tasaus:

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

Kokeile itse!

CSS-kieli

text-align: left|right|center|justify|initial|inherit;

ominaisuuden arvo

arvo kuvaus
vasen Tee tekstin vasemmalle sijoittuvaksi. Oletusarvo: selaimen päätös.
oikea Tasaa tekstin oikealle.
center Tasaa tekstin keskelle.
justify Toteuttaa kahteen suuntaan tasatun tekstin efektin.
inherit Määritetään, että text-align-ominaisuuden arvo otetaan isäelementistä.

Arvo justify

Viimeinen horisontaalinen tasausominaisuus on justify, ja sillä on omat ongelmansa.

Arvo justify voi tasata tekstiä molemmilta puolilta. Kahteen suuntaan tasatussa tekstissä molemmat tekstirivien reunat sijoitetaan isäelementin sisäisiin rajoihin. Sitten säädetään sana- ja kirjainten välisiä väljyyksiä, jotta jokaisen rivin pituus on sama. Oletat, että olet jo huomannut, että kahteen suuntaan tasatut tekstit ovat yleisiä tulostusalueella. Mutta CSS:ssä tarvitaan enemmän huomiota.

Määritetään, miten käyttäjäagentti (ei CSS) määrittää, miten kahteen suuntaan tasatut tekstit venytetään täyttääkseen isäelementin vasemman ja oikean reunan välinen tila. Esimerkiksi jotkut selaimet lisäävät ylimääräistä tilaa sanojen välillä, kun taas toiset selaimet jakavat ylimääräisen tilan tasaisesti kirjainten välillä (kuitenkin CSS-standardi huomauttaa, että jos letter-spacing-ominaisuusMääritetään pituusarvoksi, "käyttäjäagentti ei voi lisätä tai vähentää merkkien välitiloja enempää"). Joillakin käyttäjäagenteilla saattaa olla mahdollista vähentää tiettyjen rivien tilaa, jolloin teksti tiivistyy. Kaikki nämä menetelmät vaikuttavat elementin ulkoasuun, jopa korjaavat sen korkeuden, riippuen siitä, kuinka paljon käyttäjäagentin tasausvalinnat vaikuttavat tekstiriveihin.

CSS ei myöskään määritä, miten lyhenteitä käsitellään (huomio 1). Suurin osa kahteen suuntaan tasatusta tekstistä käyttää lyhenteitä pitkien sanojen jakamiseen kahteen riviin, jotta välit sanien välillä pienenevät ja parantavat tekstirivin ulkoasua. Koska CSS ei määrittele lyhenteen käyttäytymistä, käyttäjäagentti ei todennäköisesti lisää lyhenteitä automaattisesti. Siksi kahteen suuntaan tasatut tekstit näyttävät CSS:ssä huonommilta, erityisesti jos elementti on liian kapea, jolloin riviin mahtuu vain muutama sana. Totta kai, on mahdollista käyttää kapeita suunnitteluelementtejä, mutta on oltava varovainen mahdollisista haitoista.

Huomio 1:CSS:ssä ei ole määritelty, miten lyhenteitä käsitellään, koska eri kielillä on eri lyhenteen säännöt. Standardi ei pyri sovittamaan tällaisia todennäköisesti epätäydellisiä sääntöjä, vaan jättää tämän kysymyksen kokonaan huomiotta.

Tekninen yksityiskohta

Oletusarvo: Jos direction-ominaisuus on ltr, oletusarvo on left; jos direction on rtl, se on right.
Perinnäisyys: kyllä
Versio: CSS1
JavaScript-kieli: object.style.textAlign="right"

Lisää esimerkkejä

Tekstin tasaus
Tämä esimerkki näyttää, miten tekstin tasaus voidaan tehdä.

Selaimen tuki

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

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5