Tekstin tasaus - CSS-temppuja

Anonim

text-alignOmaisuus CSS käytetään kohdistamiseksi sisemmän sisältö lohkon elementin.

p ( text-align: center; )

Nämä ovat perinteisiä arvoja tekstin tasaamiseksi:

  • left- Oletusarvo. Sisältö kohdistuu vasemmalle puolelle.
  • right - Sisältö kohdistuu oikealla puolella.
  • center- Sisältö keskittyy vasemman ja oikean reunan väliin. Kunkin rivin vasemmalla ja oikealla puolella olevan valkoisen tilan on oltava yhtä suuri.
  • justify - Sisältöpaikat niin, että mahdollisimman monta lohkoa mahtuu yhdelle riville ja rivin ensimmäinen sana on vasenta reunaa ja viimeinen sana oikeaa reunaa.
  • inherit - Arvo on mitä tahansa ylätason elementtiä.

"Sisältöä" käytetään tässä terminä "tekstin" sijasta, koska vaikka tekstin tasaus vaikuttaa varmasti tekstiin, se vaikuttaa kaikkiin kyseisen säiliön sisäisiin tai rivin sisällä oleviin elementteihin.

Myös CSS3: ssa on kaksi uutta arvoa, alku ja loppu. Nämä arvot helpottavat monen kielen tukea. Esimerkiksi englanti on vasemmalta oikealle (ltr) ja arabia oikealta vasemmalle (rtl). "Oikean" ja "vasemman" käyttö arvoina on liian jäykkä eikä sovi suuntaan muuttuessa. Nämä uudet arvot mukautuvat:

  • start - Sama kuin “vasen” ltr: ssä, sama kuin “oikea” rtl: ssä.
  • end - Sama kuin “oikea” ltr: ssä, sama kuin “vasen” rtl: ssä.

Siellä on myös match-parent, joka on samanlainen kuin inherit, vain että uusi arvo lasketaan nykyisen elementin suunnan suhteen, sen sijaan, että tiedät, ettet tee sitä.

Teknisissä tiedoissa on muutama asia, joilla ei vielä ole selaintukea. Yksi on arvo "alku loppu", joka kohdistaa ensimmäisen rivin ikään kuin "alku" ja kaikki seuraavat rivit kuin "loppu". Toinen antaa arvolle merkkijonon, kuten text-align: "." start;Teksti tulee linjaamaan sen ensimmäisen esiintymisen mukaan, kuten riviin numeroiden sarake desimaalin tarkkuudella.

Esimerkkejä

Tämä teksti on tasattu vasemmalle.

Tämä teksti on tasattu oikealle.

Olen keskitetty!

Olen perusteltu. Täytän tilan tarkalleen (paitsi viimeisellä rivillä), vaikka minun on ajoitettava hieman.

Perin vanhempani linjauksen. Tässä tapauksessa se tarkoittaa vasemmalle.

Selaimen tuki

Vasemmalle, oikealle, keskelle, perustele:

Kromi Safari Firefox Ooppera IE Android iOS
Minkä tahansa Minkä tahansa Minkä tahansa 3,5+ 3+ Minkä tahansa Minkä tahansa

Sillä startja endarvot:

Kromi Safari Firefox Ooppera IE Android iOS
Minkä tahansa 3.1+ 3.6+ Ei mitään Ei mitään Minkä tahansa Minkä tahansa