Как в HTML сделать выравнивание текста по центру | Уроки HTML, CSS

Сейчас Вы увидите, что выровнять текст - это очень просто.
Для поддержки канала: https://wiseplat.org/donat По номеру карты: 5599005072205482
Выравнивание текста - очень популярная задача, которую постоянно решают фронтэнд разработчики и дизайнеры html - страниц.

Когда вы начинаете размещать любой текст на вашей странице, то всегда возникает желание, то выровнять его по левому краю, то выровнять по правому краю, то растянуть на ширину страницы.

Итак, первый способ – это указание атрибута align со значением как выровнять текст. Вот пример для выравнивания по центру:

[p align=”center”]Выравнивание этого текста по центру.[/p]

Значения атрибута могут быть следующими: justify – выравнивание текста по ширине страницы; right – по правому краю; left — по левому.

И это применимо для тегов - h1, h2, h3, h4, h5, h6 и контейнера - div.

Второй способ - это использование стилей, все выглядеть будет также. Для этого назначаем стиль тегу [p] через указание атрибуту style значения равного text-align с установленным значением выравнивания.

Если по простому 😊 – то в стиле элемента прописываем свойство text-align со значением как выравнивать его содержимое. Пример ниже:

[p style=”text-align:center;”]Здесь какой-то наш супер текст 😊[/p]

Третий вариант – используют для сокращения написания кода, т.е. многократного дублирования стилей по разным элементам. Используют классы стилей – но не надо пугаться этого названия, оно просто означает набор определенных вами стилей.

Делается это еще проще, чем второй вариант. В тегах [head][/head] прописывается теги стиля страницы [style][/style], и уже в них определяется класс стилей. Само название класса идет с точкой, а в фигурных скобках указывается перечисление стилей, как во втором варианте.

Пример ниже, класс имеет название my_1 и он присваивается элементу через атрибут class, в котором и указывается название класса:

[p class="my_1"]Наш текст 23[/p]

+ Размещаете в тегах [head][/head] это определение стилей для класса my_1:

[style]
.my_1 {text-align: center;}
[/style]

Полный пример:

[!DOCTYPE html]
[html lang="en"]
[head]
[meta charset="UTF-8"]
[title]Выравнивание[/title]
[style]
.my_1 {text-align: center;}
[/style]
[/head]
[body]
[p align="right"]Наш текст[/p]
[p style="text-align: center;"]Наш текст 2[/p]
[p class="my_1"]Наш текст 23[/p]
[p class="my_1"]Наш текст 24[/p]
[/body]
[/html]

*** Внимание: Угловые скобки в описании нельзя разместить - поэтому вместо них использованы квадратные [ ] !!! ***

#html #текст #выравнивание #центр #Трёхгорка #Одинцово #дизайн #design

Подписывайтесь на наш канал в YouTube: https://www.youtube.com/channel/UCfxnN0xALQR6OtznIj35ypQ

Вступайте в нашу группу ВК: https://vk.com/wiseplat

Задавайте вопросы – постараюсь ответить 😊
Удачи в таких классных начинаниях!

Видео Как в HTML сделать выравнивание текста по центру | Уроки HTML, CSS канала Изучаем мир ИТ / Олег Шпагин / WISEPLAT