Text align по ширине

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

Синтаксис CSS text-align

  • center – выравнивание по центру области (например ширина области 500 пикселей, значит будет выравнивание по линии 250 пикселей)
  • justify – растягивание текста по всей ширине области
  • left – выравнивание по левому краю
  • right – выравнивание по правому краю
  • inherit – принять значение предка (родителя)

Чаще всего эти свойства применяются в блоках

Примечание:
Есть также свойство vertical-align, которое отвечает за вертикальное выравнивание.

Как сделать выравнивание текста в html

Пример №1. Выравнивание текста по левому краю

Выравнивание текста по левому краю. Действуют по умолчанию.

На странице преобразуется в следующее

Пример №2. Выравнивание текста и картинки по центру

Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.

На странице преобразуется в следующее

Пример №3. Выравнивание текста по правому краю

Выравнивание текста по правому краю.

На странице преобразуется в следующее

Пример №4. Выравнивание текста по ширине всей области

Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.

На странице преобразуется в следующее

Иногда text-align: justify; может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.

Читайте также:  Просмотр фото для андроид лучший

Вместо свойства text-align можно также использовать атрибут align , который пишется вместе с тегом. Его можно использовать у различных тегов. Например:

Разница в тегах

в том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.

По умолчанию текст на веб-страницах выровнен по левому краю элемента, в котором он располагается, однако используя свойство text-align, можно переопределить, как будут выравниваться строки текста относительно границ элемента. Рассмотрим каждое из возможных значений:

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

Попробовать »

Примечание: свойство text-align работает только с блочными элементами, такими как абзац или div, выравнивая внутри них все строчное содержимое, включая изображения. Применение свойства к строчным элементам, таким как ссылка или span, не даст никакого эффекта.

CSS Internet Explorer Chrome Opera Safari Firefox Android iOS
2.1 6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+
3 2.0+ 11.6+ 3.1+ 3.6+ 2.1+ 2.0+

Краткая информация

Значение по умолчанию left
Наследуется Да
Применяется Ко всем элементам
Ссылка на спецификацию
  • http://www.w3.org/TR/CSS21/text.html#propdef-text-align
  • http://www.w3.org/TR/css3-text/#text-align

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

CSS2.1
CSS3

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Читайте также:  Тим вивер для линукс

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[window.]document.getElementBy >elementID ").style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector