Вирівнювання тексту - 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”, а будь-які наступні рядки - як “end”. Інший - це присвоєння значенню рядка, як-от text-align: "." start;Текст буде змінено на перше входження цього, як, наприклад, для вирівнювання стовпця чисел вздовж десяткової коми.

Приклади

Цей текст вирівняно за лівим краєм.

Цей текст вирівняно по правому краю.

Я в центрі!

Я виправданий. Я заповнюю простір точно (крім останнього рядка), навіть якщо мені доводиться часом трохи розтягуватися.

Я успадковую вирівнювання батьків. У цьому випадку це означає залишився.

Підтримка браузера

Ліворуч, праворуч, по центру обґрунтуйте:

Chrome Сафарі Firefox Опера IE Android iOS
Будь-який Будь-який Будь-який 3,5+ 3+ Будь-який Будь-який

Для значень startі end:

Chrome Сафарі Firefox Опера IE Android iOS
Будь-який 3.1+ 3,6+ Жоден Жоден Будь-який Будь-який