Yhdistä asiat CSS Text Align -ominaisuuden avulla

Yhdistä asiat CSS Text Align -ominaisuuden avulla

Yksi ensimmäisistä ominaisuuksista, jonka kaikki kehittäjät oppivat tekstinkäsittelyn parissa, oli tekstin tasaus. Tämä pieni työkalu on ollut elintärkeä ammattikirjoittajille ja amatöörilehtisten suunnittelijoille. Ei ole yllätys, että CSS tukee tekstin kohdistusta web -suunnittelussa.





The tekstin tasaus ominaisuus yhdessä yhden tai kahden muun kanssa ohjaa sitä, miten elementti tasoittaa tekstinsä vaakasuunnassa. Perusasioiden lisäksi selaimet toteuttavat hitaasti enemmän teknisiä tietoja, mutta täysi tuki vaihtelee. Opi tasaamaan tekstiä ja mitä ominaisuuksia tavalliset selaimet tukevat nykyään.





CSS-tekstin tasaus -ominaisuuden perusteet

Tasaus on yksi tunnetuimmista typografian termeistä. CSS: n yhteydessä tekstin tasaus viittaa vaakasuoraan kohdistukseen.





Vaakasuuntainen tekstin tasaus koskee vain lohkosäiliöitä. Nämä ovat täysleveitä elementtejä, kuten kappaleita ja jakoja. Käyttämällä tekstin tasaus ominaisuus inline -elementissä, kuten sisään ei vaikuta. Voit myös kohdistaa luettelokohteet ja taulukon solut:

paras ilmainen sähköpostisovellus Windows 10: lle

Oletuksena vasemmalta oikealle kielellä (lisää tästä myöhemmin) teksti kohdistuu vasemmalle:



CSS: ssä tämä on sama kuin:

p { text-align: left; }

Tai:





p { text-align: start; }

Aiheeseen liittyviä: Mitä CSC -tyylisivuja käytetään ja mihin CSS: ää käytetään?

Voit käyttää muita arvoja tekstin tasaus ominaisuus muuttaa vaakasuuntaista kohdistusta. Yleisimmät arvot ovat tuttuja tekstinkäsittelyohjelmista:





text-align: left
text-align: center
text-align: right

Tasaa vasen ja oikea reuna käyttämällä perusteluja

Toinen yhteinen arvo tekstin tasaus On perustella . Selaimet lisäävät perusteltuun tekstiin tilaa niin, että jokainen rivi ulottuu täyttämään käytettävissä olevan tilan:

Kun perustat tekstin, viimeinen rivi voi olla hankala. Koska se voi olla hyvin lyhyt (mahdollisesti vain yksi sana), sen välinen etäisyys koko leveydelle voi olla ruma. Oletuksena jopa perusteltu teksti tasaa viimeisen rivin vasemmalle.

kuinka sulkea ikkuna ilman hiirtä

Saatat joskus haluta erilaisen vaikutuksen. Selainten toteutukset saavuttavat tekniset tiedot, mutta kaksi lähestymistapaa ovat mahdollisia.

The perustella-kaikki arvon pitäisi tarkoittaa, että selaimet kohtelevat viimeistä viivaa kuten kaikki muutkin ja venyttävät sen koko leveydelle. Tätä kirjoitettaessa mikään selain ei kuitenkaan tue tätä arvoa. Sinä pystyt tarkista caniuse, jos he tekevät kun luet tätä artikkelia.

Toinen CSS -ominaisuus, text-align-last , on joustavampi ja sillä on parempi tuki. Voit käsitellä sitä enemmän tai vähemmän samalla tavalla kuin tekstin tasaus mutta se koskee vain viimeistä riviä:

Selaimen tuki tälle omaisuudelle on parempi, mutta ei täydellinen. Uudelleen, tarkista kaniisi ennen käyttöä . Jos selain ei tunnista tätä ominaisuutta, se jättää sen huomiotta.

Tekstin kohdistaminen ja lukusuunta

Saatat työskennellä kielen, kuten arabian tai heprean, kanssa, joka lukee oikealta vasemmalle. CSS käyttää suunta ominaisuus tämän määrittämiseksi, esimerkiksi:

direction: rtl;

Nämä kielet tasaavat tekstin yleensä oletuksena oikealle.

Sen sijaan, että olisi määriteltävä vasemmalle / oikein ensisijainen tapa tasata tekstiä käyttää arvoja alkaa ja loppuun . Tämä määrittää, onko tekstin oltava rivillä jokaisen rivin alussa vai lopussa. Vasemmalta oikealle alkaa on vastaava kuin vasemmalle . Oikealta vasemmalle kielellä teksti alkaa oikealta ja päättyy vasemmalle.

palvelimen IP -osoitetta ei löytynyt.

Käyttämällä alkaa tai loppuun tarkoittaa, että kohdistus on johdonmukainen tekstin suunnasta riippumatta.

Kuinka elementit perivät tekstin tasaus-ominaisuuden

Sinun pitäisi olla tietoinen siitä, että tekstin tasaus omaisuus perii. Jos esimerkiksi asetat sen kohtaan vartalo elementti, se koskee kaikkia sivun elementtejä. Voit tietysti ohittaa sen millä tahansa elementillä.

Tekstin tasaus -ominaisuuden käyttäminen asettelun hallintaan

Voit käyttää tekstin tasaus CSS -ominaisuus määrittää, miten selaimet asettavat tekstiä vaakasuunnassa. Yleisimmät arvot ovat vasemmalle , oikein , keskusta ja perustella . Nämä ovat kuitenkin melko yksinkertaisia perustella tuo jonkin verran monimutkaisuutta.

Sinun tulee käyttää tekstin kohdistusta säästeliäästi. Mainostauluissa ja julisteissa keskitetty kohdistaminen saattaa olla tarkoituksenmukaista, mutta se voi vaikeuttaa pidempien tekstilohkojen lukemista. Perustelut ovat yleensä luettavampia, kun tekstirivit ovat pidempiä. Lyhyiden tekstisarakkeiden perustelu voi luoda rumat välilyönnit.

The tekstin tasaus omaisuus on yksi monista CSS -ominaisuuksista, jotka tarjoavat hyödyllistä muotoilua ja peruspaikannusta.

Jaa Jaa Tweet Sähköposti 10 yksinkertaista CSS -koodiesimerkkiä, jotka opit 10 minuutissa

Tarvitsetko apua taidon CSS kanssa? Kokeile aluksi näitä CSS -koodin perusesimerkkejä ja käytä niitä sitten omilla verkkosivuillasi.

Lue seuraava
Liittyvät aiheet
  • Ohjelmointi
  • Verkkokehitys
  • Web-suunnittelu
  • CSS
Kirjailijasta Bobby Jack(58 artikkelia julkaistu)

Bobby on teknologian harrastaja, joka työskenteli ohjelmistokehittäjänä lähes kaksi vuosikymmentä. Hän on intohimoinen pelaamisesta, työskentelee Switch Editor Magazine -lehden arvostelutoimittajana ja on upotettu kaikkeen verkkojulkaisemiseen ja -kehitykseen.

Lisää Bobby Jackilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi