Как отцентрировать текст в 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, Интернет-технологии, похожие статьи

В начале 2018 года мы провели наш ежегодный опрос JetBrains Developer Ecosystem 2018, чтобы выяснить, чем сейчас живет мир программирования и как он изменился по сравнению с 2017 годом. Здесь мы поделимся самыми интересными результатами...
HTML, XML, DHTML  |  27.06.2018
Компания Microsoft совместно с  HeadHunter  провела исследование российского рынка труда, которое показало, что количество вакансий, где требуется навык программирования, стремительно растет, причем даже в сферах, не связанных с ИТ...
HTML, XML, DHTML  |  25.04.2018
  Герман Греф стремится трансформировать Сбербанк в цифровую компанию   Сбербанк запустил бета-версию мессенджера в мобильном приложении "Сбербанк Онлайн", убедились корреспонденты "Ведомостей". "Ведомости" ожидают ответ на запрос о комментарии от пресс-службы Сбербанка.
HTML, XML, DHTML  |  13.02.2018
Язык  Java , созданный еще в 1995 г., остается одним из наиболее популярных языков программирования, особенно для клиент-серверных веб-приложений. Численность применяющих его разработчиков оценивается в 9 млн. Его прелесть заключается в том, что это развивающаяся технология.
HTML, XML, DHTML  |  30.01.2018
HTML, XML, DHTML  |  10.10.2017  | 
Яндекс цитирования