Как отцентрировать текст в HTML

Отцентрировать текст в HTML можно, используя тег <center> или выравнивание текста по центру CSS.

Использование тегов <center></center>

Один из способов отцентрировать текст – заключить его в теги <center></center>:

<center>Центрировать этот текст!</center>

Вставка этого текста в HTML-код приведет к следующему результату:

Центрировать этот текст!

Примечание: Сегодня тег <center> признан устаревшим. И хотя он все еще работает, ожидается, что он будет удален. Для центрирования текста мы рекомендуем использовать CSS.

Использование свойства CSS

Можно отцентрировать текст при помощи CSS задав элементу, который должен быть отцентрирован, свойство text-align.

Центрирование нескольких блоков текста

Если у вас один или несколько текстов по центру блока CSS, которые необходимо отцентрировать, можно сделать это, добавив атрибут style к открывающему тегу элемента и использовав свойство text-align. В примере, приведенном ниже, мы добавили их к тегу <p>:

<p style="text-align:center">Центрировать этот текст!</p>

Заметьте, что для свойства text-align мы установили значение center, которое означает, что элемент необходимо выровнять по центру.

Несколько блоков текста

Как выровнять текст по центру CSS, если много блоков текста? Вы можете использовать тег <style></style> в секции head (или во внешней таблице стилей), чтобы отцентрировать каждый элемент.

<style>
p {
    text-align:center
}
</style>

Текст будет отцентрирован внутри каждой пары тегов <p></p>. Если необходимо выровнять по центру только несколько параграфов, тогда можно создать класс CSS, как это показано ниже:

<style>
.center {
    text-align: center
}
</style>

Если вы создадите класс center, как показано в предыдущем примере, параграф может быть отцентрирован с помощью приведенного ниже кода, который «вызывает» класс center:

<p class="center">Центрировать этот текст!</p>

Совет: Созданный класс для CSS выравнивания текста по центру блока можно использовать для любого HTML-тега. Например, если вы хотите, чтобы заголовок располагался по центру, добавьте class="center" в тег <h1>.

Перевод статьи “HOW TO CENTER TEXT IN HTML” был подготовлен дружной командой проекта Сайтостроение от А до Я.

HTML, XML, DHTML  |  10.10.2017  | 

HTML, XML, DHTML, Интернет-технологии, похожие статьи

С помощью HTML hidden разработчики веб-форм могут хранить и отправлять информацию, скрытую от пользователей.
HTML, XML, DHTML  |  04.10.2017
В этой статье мы рассмотрим, какие элементы необходимо использовать при построении базовой структуры HTML документа.
HTML, XML, DHTML  |  30.09.2017
Как создать HTML файл, открывать, редактировать, конвертировать и в чем его отличие от HTM:
HTML, XML, DHTML  |  28.09.2017
Frameset — это легкий способ создавать несколько отдельных областей прокрутки в окне браузера, а также удобный механизм для изменения содержимого фрейма.
HTML, XML, DHTML  |  26.09.2017




Яндекс цитирования