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

Сейчас Вы увидите, что выровнять текст - это очень просто.
Выравнивание текста - очень популярная задача, которую постоянно решают фронтэнд разработчики и дизайнеры 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

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

[wtcher_]

мы тут пришли посмотреть быстро код, и убежать делать свои проекты, а ты начал с создания файла html, подготавливай код зарание, и объясняй как он работает!

[ПавелПилипенко-дн]

Здравствуйте, спасибо за видео. Подскажите, а как переместить кнопки по центру?

[denysborysenko]

Не знаешь почему 1 ровно а второй по центру и третий справа они идут ниже и ниже как сделать их всех на одной высоте?

[AutoBoxCool]

ввел запрос для сдвига текста в пикселях в хтмл и все равно упорно выходит выравнивание по центру или по краям.

[PerfectLife-lsid]

Всем привет, подскажите как выровнять по центру список и чтобы цифры не оставались слева
<ol align="center">
<li><strong>строка 1</strong></li>
<li><strong>строка 2</strong></li>
<li><strong>строка 3</strong></li>
</ol>

[diar]

Здрасте у меня такой вопрос как сделать чтобы текст стоял не по центру не справа и не слева и в другом месте

[kirill]

почему именно выравнивание не работает? 😡

[jetjefferson]

Вопрос с небольшим опозданием: зачем нужен CSS, если можно постоянно использовать атрибут/тег "style"?

[bek]

я не получил что хотел так что дизлайк