Теги выравнивания по центру в HTML.

Опубликовано: 24.08.2018

видео Теги выравнивания по центру в HTML.

Основы HTML. Выравниваем содержимое страницы по центру.

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



Итак, давайте сначала рассмотрим самый простой, но устаревающий способ – выравнивание по центру с помощью тега <center> .

Допустим, на вашей странице есть картинка и вам необходимо выровнять ее по центру. Все, что нужно – это заключить картинку в парный тег <center> . Пример:


Выравнивание текста в HTML: HTML атрибут align и его значения justify, left, right, center

1 2 3 4 5 6 7 8 9 <!DOCTYPE html> <html> <head> <title>Теги центрирования (выравнивания) в HTML</title> </head> <body> <center><img src='image.jpg'></center> </body> </html>

Как уже было сказано выше, тег <center> относится к устаревающим тегам HTML, и его на данный момент не рекомендуется использовать. Более правильно использовать css-стили для центрирования:

1. text-align: center;

2. margin: 0 auto;

Первое свойство используется применительно к содержимому родительского элемента. Вот как бы мы переписали предыдущий пример с картинкой:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title>Центрирование</title> <style> body{ text-align:center; } </style> </head> <body> <img src='image.jpg'> Какой-то текст </body> </html>

В данном примере по центру будет выровнена не только картинка, но и любое другое содержимое body, например, текст.

Во втором случае мы используем «правильное центрирование»:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <title>Центрирование</title> <style> .my_style{ margin: 0 auto; } </style> </head> <body> <img src='image.jpg' class='my_style'> </body> </html>

В данном примере нужные свойства мы назначили самой картинке — отступы margin будут формироваться автоматически (равными слева и справа).

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

Другие посты

IRC (Internet Relay Chat)
rss