Как отцентрировать текст в 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. В том числе и с помощь list style none.
HTML, XML, DHTML  |  14.12.2017
Стоимость "Трекера" для небольшой команды составит 93 рубля за каждого пользователя.
HTML, XML, DHTML  |  13.12.2017
Когда имеет значение каждый байт, можно использовать HTML-тег base href, чтобы указать атрибуты target по умолчанию для всех относительных URL-адресов на странице:
HTML, XML, DHTML  |  09.12.2017
Логический атрибут required HTML сообщает браузеру о возможности отправки данных формы только при заполнении обязательных полей. Это значит, что поле нельзя оставить пустым, и что в зависимости от других атрибутов или типов полей приниматься могут только конкретные типы значений...
HTML, XML, DHTML  |  01.11.2017




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