Тег HTML выравнивание текста по центру
Тег в HTML используется, чтобы выровнять текст по центру.
Текст, помещенный внутри тега , будет размещен симметрично относительно центра родительского блока.
Тег является устаревшим и не поддерживается в HTML5.
Как выровнять текст по центру в HTML5
В HTML5 выравнивание текста по центру (по середине блока) осуществляется при помощи CSS свойства text-align . Значение center позволяет выровнять текст относительно центра (центрирование). Другие значения: left, right, justify изменяют правило выравнивания на, соответственно, по левому краю, по правому краю и по ширине блока.
Синтаксис
текст Отображение в браузере
Пример использования в HTML коде
Выравнивание текста по центру в HTML
текст по центру
текст по центру Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
Атрибуты
Тег не имеет собственных атрибутов, поддерживает глобальные HTML атрибуты.
Как выровнять текст по центру в html
Выравнивание текста отвечает за его внешний вид, формирование краев абзаца. Обычно текст обрамляют тегами
или и затем применяют css свойство text-align со следующим значением:
- по левому краю — left
- по правому краю — right
- по центру — center
- по ширине — justify
Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Отличие между абзацем (тег
) и тегом в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега .
Этот текст по умолчанию займет левое вырывание class="center">Пример текста с выравниваем по центру class="right">Пример текста с выравниваем по правому краю class="justify"> Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине
.center text-align: center; > .right text-align: right; > .justify text-align: justify; > Как выровнять текст по центру?
Используйте стилевое свойство text-align со значением center , добавляя его к абзацу (селектору P ) или к определенному слою (пример 1).
Пример 1. Выравнивание текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Выравнивание по центру .text Современная образовательная парадигма, ратифицируя приоритет личностной ориентации педагогического процесса, в ходе которого осуществляется развитие природных задатков, заложенных в каждом индивидууме, требует переосмысления существующих традиционных форм и методов общеобязательного образования.
Результат примера показан на рис. 1.
Рис. 1. Текст, выровненный по центру веб-страницы
В данном примере текст внутри слоя с именем text выравнивается по центру веб-страницы.
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как отцентрировать текст в HTML
Не знаете как выровнять текст по центру в HTML? Отцентрировать текст в HTML можно, используя тег или применив выравнивание текста по центру CSS .
Использование тегов
Один из способов отцентрировать текст – заключить его в теги :
Центрировать этот текст!
Вставка этого текста в HTML-код приведет к следующему результату:
Центрировать этот текст!
Примечание: Сегодня тег признан устаревшим. И хотя он все еще работает, ожидается, что он будет удален. Для центрирования текста мы рекомендуем использовать CSS .
Использование свойства CSS
Можно отцентрировать текст при помощи CSS задав элементу, который должен быть отцентрирован, свойство text-align .
Центрирование нескольких блоков текста
Если у вас один или несколько текстов по центру блока CSS , которые необходимо отцентрировать, можно сделать это, добавив атрибут style к открывающему тегу элемента и использовав свойство text-align . В примере, приведенном ниже, мы добавили их к тегу
:
Центрировать этот текст!
Заметьте, что для свойства text-align мы установили значение center , которое означает, что элемент необходимо выровнять по центру.
Несколько блоков текста
Как выровнять текст по центру CSS , если много блоков текста? Вы можете использовать тег в секции head ( или во внешней таблице стилей ), чтобы отцентрировать каждый элемент.
Текст будет отцентрирован внутри каждой пары тегов . Если необходимо выровнять по центру только несколько параграфов, тогда можно создать класс CSS , как это показано ниже:
.center
Если вы создадите класс center , как показано в предыдущем примере, параграф может быть отцентрирован с помощью приведенного ниже кода, который « вызывает » класс center :
Центрировать этот текст!
Совет : Созданный класс для CSS выравнивания текста по центру блока можно использовать для любого HTML-тега . Например, если вы хотите, чтобы заголовок располагался по центру, добавьте class=»center» в тег .
Сергей Бензенко автор-переводчик статьи « HOW TO CENTER TEXT IN HTML »