Poravnava besedila - CSS-triki

Anonim

text-alignHotel v CSS se uporablja za poravnavanje notranje vsebino bloka elementa.

p ( text-align: center; )

To so tradicionalne vrednosti za poravnavo besedila:

  • left- Privzeta vrednost. Vsebina se poravna vzdolž leve strani.
  • right - Vsebina se poravna vzdolž desne strani.
  • center- Vsebinska središča med levim in desnim robom. Praznina na levi in ​​desni strani vsake vrstice mora biti enaka.
  • justify - Prostori vsebine so takšni, da se v eno vrstico prilega čim več blokov, prva beseda v tej vrstici pa je ob levem robu, zadnja beseda pa ob desnem robu.
  • inherit - Vrednost bo takšna, kakršna je nadrejeni element.

"Vsebina" se tukaj uporablja kot izraz namesto kot "besedilo", ker čeprav poravnava besedila zagotovo vpliva na besedilo, vpliva na vse vrstice ali vstavljene elemente bloka v tem vsebniku.

V CSS3 sta tudi dve novi vrednosti, začetek in konec. Te vrednosti olajšajo podporo za več jezikov. Angleščina je na primer jezik od leve proti desni (ltr), arabščina pa jezik od desne proti levi (rtl). Uporaba “desno” in “levo” za vrednosti je preveč toga in se ne spreminja, ko se smer spreminja. Te nove vrednote se prilagajajo:

  • start - Enako kot "levo" v ltr, enako kot "desno" v rtl.
  • end - Enako kot "desno" v ltr, enako kot "levo" v rtl.

Obstaja tudi match-parent, kar je podobno inherit, le da se nova vrednost izračuna glede na smer trenutnega elementa, namesto da veste, da tega ne storite.

V specifikaciji je nekaj stvari, ki še nimajo podpore za brskalnik. Ena je vrednost "začetek konca", ki bi poravnala prvo vrstico, kot da je "začetek", in vse nadaljnje vrstice, kot da je "konec". Druga vrednost daje vrednost v nizu, na primer text-align: "." start;Besedilo se bo spremenilo ob prvem pojavljanju tega, kot v vrstici stolpca s številkami vzdolž decimalne vejice.

Primeri

To besedilo je poravnano levo.

To besedilo je poravnano desno.

Osredotočen sem!

Upravičena sem. Prostor zapolnim natančno (razen v zadnji vrstici), četudi se moram včasih nekoliko raztegniti.

Podedujem poravnavo staršev. V tem primeru to pomeni levo.

Podpora za brskalnik

Za levo, desno, sredino utemeljite:

Chrome Safari Firefox Opera IE Android iOS
Kaj Kaj Kaj 3,5+ 3+ Kaj Kaj

Za vrednosti startin end:

Chrome Safari Firefox Opera IE Android iOS
Kaj 3.1+ 3,6+ Nobenega Nobenega Kaj Kaj