Горизонтальное центрирование
CSS предлагает несколько способов центрирования по горизонтали, и какой из них подойдёт, зависит от типа элемента.
Центрирование блочных элементов
Блочный элемент, например <div>, центрируется с помощью margin: auto, при условии что у него задан width. Без этого элемент растягивается на весь контейнер.
Примечание: Когда width отсутствует или равен 100%, центрирование не действует на блочные элементы.
Пример
Здесь элемент <div> шириной 50% расположен по центру.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Block Element</title>
<style>
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align a Block Element</h2>
<div class="center">
<p>This div element is centered.</p>
</div>
</body>
</html>
Центрирование текста
Текст внутри блочного элемента центрируется с помощью text-align: center.
Пример
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Text</title>
<style>
p {
text-align: center;
}
</style>
</head>
<body>
<h2>Center Align Text</h2>
<p>This text is centered.</p>
</body>
</html>
Центрирование изображения
Чтобы центрировать изображение, нужно два шага: сделайте его блочным элементом с помощью display: block, затем задайте и margin-left, и margin-right значение auto.
Пример
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image</title>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<img src="madrid.jpg" alt="Madrid">
</body>
</html>
Выравнивание влево и вправо — с помощью position
Задание position: absolute — один из способов выровнять элементы по левому или правому краю.
Примечание: Элементы, позиционированные таким образом, выходят из обычного потока и могут перекрывать другие элементы.
Пример
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Right Align with Position</title>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right Align with position</h2>
<div class="right">
<p>This div element is positioned to the right, with the position: absolute property.</p>
</div>
</body>
</html>
Выравнивание влево и вправо — с помощью float
Свойство float предлагает другой способ выровнять элемент по левому или правому краю.
Пример
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Right Align with Float</title>
<style>
.right {
float: right;
width: 300px;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right Align with float</h2>
<div class="right">
<p>This div element has float: right.</p>
</div>
</body>
</html>