Выравнивание блочных элементов в CSS
Свойство margin применяется не только
для задания отступов, но и для центрирования
блочных элементов. Для этого правый и левый
отступ следует задать в значение auto.
В примере ниже внутренний блок станет по центру:
<div class="parent">
<div class="child"></div>
</div>
.parent {
border: 1px solid red;
}
.child {
height: 100px;
width: 200px;
border: 1px solid green;
margin: 10px auto;
}
:
Имейте ввиду, что таким образом можно центрировать только блочные элементы, только по горизонтали и только, если им задана ширина.
Если нам нужны разные верхний и нижний отступ
margin, то можно написать вот так:
.child {
margin: 30px auto 10px auto;
}
Можно переписать и через три значения: первое
задаст верхний отступ, третье - нижний, а
второе задаст значение auto для правого
и левого отступов:
.child {
margin: 30px auto 10px;
}
Повторите страницу по образцу, сделав так, чтобы зеленые блоки располагались по центру своего родителя: