Как отцентрировать текст в 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>.

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

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