Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование свойства CSS выравнивания текста

23 февраля 2016 | Опубликовано в css | Нет комментариев »

Свойство CSS выравнивания текста используется для горизонтального выравнивания содержимого блоков, строчно-блочных элементов и ячеек таблиц. Из этого урока вы узнаете больше о способах выравнивания текста и научитесь использовать новые свойства.

 

 


Пример записи:

p {
text-align: center;
}

Следующие значения поддерживаются буквально всеми версиями браузеров:

  • left — значение по умолчанию, содержимое выравнивается по левому краю.
  • right — содержимое выравнивается по правому краю.
  • center — содержимое выравнивается по центру между левым и правым краями, незаполненные промежутки с левой и с правой сторон должны быть равны.
  • justify -  содержимое полностью заполняет ширину блока, в котором находится, кроме последней строки, для заполнения увеличивается размер пробелов, первое слово или элемент начинается с левого края, последнее слово или элемент заканчивается у правого края.
  • inherit — содержимое наследует значение родительского элемента.

Содержимое чаще всего является текстом, но также может быть и другими строчными или строчно-блочными элементами, находящимися в блоке, которому задается свойство выравнивания текста.

Следующие значения введены в CSS3 и поддерживаются многими старыми и новыми версиями браузеров, кроме старых версий браузера Opera и всех версий браузера Internet Explorer. Эти значения удобны для многоязычных сайтов. Например, русский и английский языки пишутся и читаются слева направо, а арабский язык пишется и читается справа налево. Использование просто значений выравнивания по левому или правому краю не позволяет выбирать направление в зависимости от типа письменности.

  • start - содержимое выравнивается по началу, если направление слева направо, и происходит выравнивание по левому краю или, если направление справа налево, — происходит выравнивание по правому краю.
  • end — содержимое выравнивается по концу, если направление слева направо, и происходит выравнивание по правому краю или, если направление справа налево, — происходит выравнивание по левому краю.

Еще есть новые значения, которые на момент написания урока, в начале 2016 года, не поддерживаются браузерами:

  •  justify-all — аналогично значению justify, но последняя строка тоже растягивается по ширине блока.
  • match-parent — аналогично значению inherit, но вычисляет значение, используя направление родительского элемента.
  • <string> — используются такие записи, как: text-align: «.»; text-align: start «.»; text-align: «.» end. Текст выравняется по первому появлению ключевого значения, что позволит, например, выравнять столбец чисел с десятичной точкой.
  • start end — первая строка содержимого выравнивается по началу, а последующие строки выравниваются по концу.

HTML:

<iframe width="100%" height="300" src="//jsfiddle.net/3zvfqd49/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Дополнительные и использованные материалы:

Автор урока — Maya Specctra специально для Дежурки

Смотрите также:




Оставить ответ


семь − = 2

Вставить изображение