Чтобы центрировать элемент блока по горизонтали (например, <div>), используйте margin: auto;
Установка ширины элемента предотвратит его растягивание до края контейнера.
Тогда элемент займет указанную ширину, а оставшееся пространство будет разделена поровну между двумя полями:
This div element is centered.
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p>Hello World!</p>
</div>
</body>
</html>
Примечание. Выравнивание по центру не имеет эффекта, если свойство width
не установлено. (или установить на 100%).
Чтобы просто центрировать текст внутри элемента, используйте text-align: center;
This text is centered.
.center {
text-align: center;
border: 3px solid green;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center Text</h2>
<div class="center">
<p>This text is centered.</p>
</div>
</body>
</html>
Совет. Дополнительные примеры выравнивания текста см. в главе «Текст CSS».
Чтобы центрировать изображение, установите для левого и правого полей значение auto
и превратите его в элемент block
:
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>
<img src="paris.jpg" alt="Paris" style="width:40%">
</body>
</html>
Одним из методов выравнивания элементов является использование position: Absolute;
:
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right align with the position property</h2>
<p>An example of how to right align elements with the position property:</p>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>
</body>
</html>
Примечание. Элементы с абсолютным позиционированием удаляются из обычного потока и могут перекрывать элементы.
Другой метод выравнивания элементов — использование свойства float
:
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right align with the float property</h2>
<p>An example of how to right align elements with the float property:</p>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>
</body>
</html>
Примечание. Если элемент выше содержащего его элемента и является плавающим, он переполнится за пределы контейнера. Чтобы исправить это, вы можете использовать «взлом Clearfix» (см. пример ниже).
Затем мы можем добавить хак Clearfix к содержащему элементу, чтобы исправить Эта проблема:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>
</html>
В CSS существует множество способов центрировать элемент по вертикали. Простое решение — использовать верхний и нижний отступы
:
I am vertically centered.
.center {
padding: 70px 0;
border: 3px solid
green;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center vertically with padding</h2>
<p>In this example, we use the padding property to center the div element vertically:</p>
<div class="center">
<p>I am vertically centered.</p>
</div>
</body>
</html>
Чтобы центрировать как по вертикали, так и по горизонтали, используйте padding
и text-align: center
:
I am vertically and horizontally centered.
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h2>Center with padding and text-align</h2>
<p>In this example, we use padding and text-align to center the div element both vertically and horizontally:</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Другой трюк — использовать свойство line-height
со значением, равным к свойству height
:
I am vertically and horizontally centered.
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the
following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Center with line-height</h2>
<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Если дополнение
и высота строки
не являются параметрами, другое решение — использовать позиционирование и свойство transform
:
I am vertically and horizontally centered.
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Center with position and transform</h2>
<p>In this example, we use positioning and the transform property to vertically and horizontally center the div element:</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Совет. Вы узнаете больше о свойстве трансформации в разделе «2D-преобразования». Глава.
Вы также можете использовать flexbox для центрирования объектов. Обратите внимание, что flexbox не поддерживается в IE10 и более ранних версиях:
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Flexbox Centering</h2>
<p>A container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Совет. Вы узнаете больше о Flexbox в нашей главе CSS Flexbox.