Zarovnanie textu - Triky CSS

Anonim

text-alignNehnuteľnosť v CSS sa používa pre vyrovnanie vnútorný obsah blokových elementov.

p ( text-align: center; )

Toto sú tradičné hodnoty pre zarovnanie textu:

  • left- Predvolená hodnota. Obsah sa zarovnáva pozdĺž ľavej strany.
  • right - Obsah sa zarovnáva pozdĺž pravej strany.
  • center- Obsah sa sústredí medzi ľavým a pravým okrajom. Prázdne miesto na ľavej a pravej strane každého riadku by malo byť rovnaké.
  • justify - Obsah je rozložený tak, že sa na jeden riadok zmestí čo najviac blokov a prvé slovo na tomto riadku je pozdĺž ľavého okraja a posledné slovo je pozdĺž pravého okraja.
  • inherit - Hodnota bude bez ohľadu na to, aký je nadradený prvok.

„Obsah“ sa tu používa ako výraz namiesto „text“, pretože hoci zarovnanie textu určite ovplyvňuje text, ovplyvňuje všetky vložené alebo blokované prvky v danom kontajneri.

Aj v CSS3 sú dve nové hodnoty, začiatočný a konečný. Tieto hodnoty uľahčujú podporu viacerých jazykov. Napríklad angličtina je jazyk zľava doprava (ltr) a arabčina jazyk sprava doľava (rtl). Použitie výrazov „vpravo“ a „vľavo“ pre hodnoty je príliš rigidné a neprispôsobuje sa zmenám smeru. Tieto nové hodnoty sa prispôsobujú:

  • start - Rovnako ako „vľavo“ v ltr, rovnako ako „vpravo“ v rtl.
  • end - Rovnako ako „right“ v ltr, rovnako ako „left“ v rtl.

Existuje tiež match-parentpodobné inherit, iba to, že nová hodnota sa počíta proti smeru aktuálneho prvku namiesto toho, aby ste to neurobili.

V špecifikácii je niekoľko vecí, ktoré zatiaľ nemajú žiadnu podporu prehľadávača. Jednou z nich je hodnota „začiatočný koniec“, ktorá zarovná prvý riadok, akoby bol „začiatočný“, a všetky nasledujúce riadky, akoby bol „koniec“. Ďalším je zadanie hodnoty reťazcom, napríklad text-align: "." start;Text sa spojí pri prvom výskyte, napríklad pri zarovnaní stĺpca čísel pozdĺž desatinnej čiarky.

Príklady

Tento text je zarovnaný doľava.

Tento text je zarovnaný vpravo.

Som vycentrovaný!

Som oprávnený. Vyplňujem priestor presne (až na posledný riadok), aj keď sa občas musím trochu ponaťahovať.

Dedím po zosúladení s rodičom. V tomto prípade to znamená vľavo.

Podpora prehľadávača

Pre ľavú, pravú a strednú zarovnanie:

Chrome Safari Firefox Opera IE Android iOS
akýkoľvek akýkoľvek akýkoľvek 3,5+ 3+ akýkoľvek akýkoľvek

Pre hodnoty starta end:

Chrome Safari Firefox Opera IE Android iOS
akýkoľvek 3,1+ 3,6+ Žiadne Žiadne akýkoľvek akýkoľvek