• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Главная → HTML уроки и советы → CSS → Свойство CSS text-align

Свойство CSS text-align

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


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

... text-align: center | justify | left | right | inherit; ...

Где:

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

Чаще всего эти свойства применяются в блоках <div> и абзацах <p>.

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


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

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

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

<html> <head> <style> .align_left{ border: 1px solid #aaa; background: #FFDEAD; padding: 3px; text-align: left; } </style> </head> <body> <div class="align_left">Выравнивание текста по левому краю</div> </body> </html>

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

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


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

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

<html> <head> <style> .align_center{ border: 1px solid #aaa; background: #FFDEAD; padding: 3px; text-align: center; } </style> </head> <body> <div class="align_center">Выравнивание текста по центру</div> <div class="align_center"><img src="foto.jpg"></div> </body> </html>

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

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


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

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

<html> <head> <style> .align_right{ border: 1px solid #aaa; background: #FFDEAD; padding: 3px; text-align: right; } </style> </head> <body> <div class="align_right">Выравнивание текста по правому краю</div> </body> </html>

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

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


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

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

<html> <head> <style> .align_justify{ border: 1px solid #aaa; background: #FFDEAD; padding: 3px; text-align: justify; } </style> </head> <body> <div class="align_justify">Выравнивание текста по ширине всей области</div> </body> </html>

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

Выравнивание текста по ширине всей области

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


Примечание

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

<div align="center">Выравнивание по центру</div> <p align="justify">Выравнивание текста по ширине всей области</p> <table align="right"> <tr align="center"> ... </tr> ... </table>

Разница в тегах <div> и <p> в том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.



Читайте также:
• Свойство text-align
• Свойство font
• font-weight
• Свойство display
• Свойство transform
• Как сделать рамку элементов border
• Как сделать фон на сайте html
• Как сделать анимацию в html
• Свойство text-indent

← Перейти в каталог CSS уроков

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2021 - Zarabotat-Na-Sajte.ru