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


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

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

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

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





Другие посты

Категория: HTML

Оставить комментарий