Теги выравнивания по центру в HTML.
Опубликовано: 24.08.2018
Верстка почти каждого сайта не обходится без выравнивания контента по левому или правому краю, а также по центру. В данной статье мы рассмотрим теги выравнивания по центру, которые существуют в 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 будут формироваться автоматически (равными слева и справа).
Вы можете использовать любой их этих двух вариантов, однако в обоих случаях вы должны быть уверены, что ширина родительского элемента позволяет выровнять по центру дочерний элемент.
Другие посты