Zarovnání textu - Triky CSS

Anonim

text-alignNemovitost v CSS se používá pro vyrovnání vnitřní obsah blokových elementů.

p ( text-align: center; )

Toto jsou tradiční hodnoty pro zarovnání textu:

  • left- Výchozí hodnota. Obsah se zarovná podél levé strany.
  • right - Obsah se zarovná podél pravé strany.
  • center- Obsah se soustředí mezi levým a pravým okrajem. Prázdné místo na levé a pravé straně každého řádku by mělo být stejné.
  • justify - Obsah se rozkládá tak, aby se na jeden řádek vešlo co nejvíce bloků a první slovo na tomto řádku je podél levého okraje a poslední slovo je podél pravého okraje.
  • inherit - Hodnota bude bez ohledu na to, jaký je nadřazený prvek.

„Obsah“ se zde používá jako termín namísto „text“, protože i když zarovnání textu rozhodně ovlivňuje text, ovlivňuje všechny vložené nebo vložené blokové prvky v tomto kontejneru.

V CSS3 jsou také dvě nové hodnoty, počáteční a koncová. Tyto hodnoty usnadňují podporu více jazyků. Například angličtina je jazyk zleva doprava (ltr) a arabština jazyk zprava doleva (rtl). Použití „doprava“ a „doleva“ pro hodnoty je příliš tuhé a nepřizpůsobuje se změnám směru. Tyto nové hodnoty se přizpůsobují:

  • start - Stejné jako „left“ v ltr, stejné jako „right“ v rtl.
  • end - Stejné jako „right“ v ltr, stejné jako „left“ v rtl.

K dispozici je také match-parent, což je podobné inherit, pouze to, že nová hodnota se počítá proti směru aktuálního prvku místo toho, víte, nedělat to.

Ve specifikaci je několik věcí, které zatím nemají žádnou podporu prohlížeče. Jedním z nich je hodnota „start end“, která by zarovnala první řádek, jako by byl „start“, a jakékoli další řádky, jako by to byl „end“. Dalším je dát hodnotu řetězec, jako text-align: "." start;je Text bude aline při prvním výskytu, jako v k seřazení sloupce čísel podél desetinné čárky.

Příklady

Tento text je zarovnán doleva.

Tento text je zarovnán doprava.

Jsem na střed!

Jsem oprávněný. Vyplňuji prostor přesně (kromě posledního řádku), i když se občas musím trochu protahovat.

Zdědím vyrovnání po svém rodiči. V tomto případě to znamená vlevo.

Podpora prohlížeče

Pro levou, pravou, středovou zarovnání:

Chrome Safari Firefox Opera TJ Android iOS
Žádný Žádný Žádný 3,5+ 3+ Žádný Žádný

Pro hodnoty starta end:

Chrome Safari Firefox Opera TJ Android iOS
Žádný 3.1+ 3,6+ Žádný Žádný Žádný Žádný