Подравняване на текст - CSS-трикове

Anonim

В text-alignимота в CSS се използва за изравняване на вътрешното съдържание на блоков елемент.

p ( text-align: center; )

Това са традиционните стойности за подравняване на текст:

  • left- Стойността по подразбиране. Съдържанието се подравнява по лявата страна.
  • right - Съдържанието се подравнява по дясната страна.
  • center- Центрове за съдържание между левия и десния ръб. Бялото пространство от лявата и дясната страна на всяка линия трябва да бъде равно.
  • justify - Пространства за съдържание се извеждат така, че колкото се може повече блокове да се поберат на един ред, колкото е възможно и първата дума на този ред е по левия край, а последната дума е по десния ръб.
  • inherit - Стойността ще бъде каквато и да е на родителския елемент.

„Съдържание“ се използва тук като термин вместо „текст“, тъй като макар че подравняването на текста със сигурност засяга текста, то засяга всички вградени или вградени елементи в този контейнер.

В CSS3 също има две нови стойности, начало и край. Тези стойности улесняват многоезичната поддръжка Например английският е език отляво надясно (ltr), а арабският е език отдясно наляво (rtl). Използването на „надясно“ и „наляво“ за стойности е твърде твърдо и не се адаптира при промяна на посоката. Тези нови стойности се адаптират:

  • start - Същото като „наляво“ в ltr, същото като „надясно“ в rtl.
  • end - Същото като „вдясно“ в ltr, същото като „вляво“ в rtl.

Има също match-parent, което е подобно на inherit, само че новата стойност се изчислява спрямо посоката на текущия елемент, вместо да знаете, че не правите това.

В спецификацията има няколко неща, които все още нямат поддръжка за браузър. Едната е стойността „start end“, която би подравнила първия ред, сякаш е „start“, а всички следващи редове, сякаш е „край“. Друг е даването на стойност на низ, като text-align: "." start;Текстът ще се изравнява по време на първото появяване на това, както при подреждане на колона от числа по десетична точка.

Примери

Този текст е подравнен вляво.

Този текст е подравнен вдясно.

Центриран съм!

Оправдан съм. Попълвам мястото точно (с изключение на последния ред), дори и да се налага да се разтягам понякога.

Наследявам подравняването на родителя си. В този случай това означава ляво.

Поддръжка на браузър

За ляво, дясно, център, оправдайте:

Chrome Сафари Firefox Опера IE Android iOS
Всякакви Всякакви Всякакви 3,5+ 3+ Всякакви Всякакви

За startи endстойностите:

Chrome Сафари Firefox Опера IE Android iOS
Всякакви 3.1+ 3.6+ Нито един Нито един Всякакви Всякакви