5 способов горизонтального выравнивание блоков по центру

5 способов горизонтального выравнивание блоков по центру

Почему горизонтальное выравнивание блоков по центру — тема актуальная для начинающих верстальщиков? Связано это с левосторонним позиционированием элементов на HTML странице по умолчанию. Давайте рассмотрим на наглядном примере. У нас есть блок-родитель с черной рамкой, внутри которого расположен фиолетовый блок-ребенок.


// HTML разметка

<div class="wrap">
    <div class="block"></div>
</div>

// CSS код родительского блока
.wrap {
    max-width: 400px;
    margin: 50px auto;
    border: 3px solid black;
    min-height: 100px;
}

// CSS код дочернего блока
.block {
    width: 100px;
    height: 100px;
    margin: 5px;
    background: blueviolet;
}

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

5 способов горизонтального выравнивание блоков по центру

Я знаю по меньшей мере 5 способов горизонтального выравнивания блоков по центру.

1) Свойство text-align (используется, но реже)

Добавим класс center со свойством text-align: center к родительскому блоку и отобразим дочерний блок, как inline-block.


<div class="wrap center">
    ...
</div>

.center {
    text-align: center;
}

.block {
    ...
    display: inline-block;
}

5 способов горизонтального выравнивание блоков по центру

2) Свойство margin: auto (актуальное)

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


<div class="wrap">
    <div class="block m-auto"></div>
</div>

.m-auto {
    margin: 0 auto;
}

3) Свойство position: absolute (устаревшее)

Когда к дочернему блоку применяется position: absolute, то оно перестает влиять на родителя. Поэтому для родителя мы задаем position: relative, чтобы позиционироваться от него. А ребенку задается position: absolute, смещаем его на 50% влево и задаем отступ на половину его ширины. Не рекомендую использовать этот способ, так как он противоречит принципу независимого переиспользования блоков.


<div class="wrap relative">
    <div class="block absolute"></div>
</div>

.relative {
    position: relative;
}

.absolute {
    position: absolute;
    left: 50%;
    transform: translate (-50%, 0); /* альтернатива margin-left: -50px; */
}

4) Свойство flexbox (популярное)

Flexbox — самый простой и современный способ горизонтального выравнивания по центру. Для родителя добавляются два флексовых свойства.


<div class="wrap flexbox">
    <div class="block"></div>
</div>

.flexbox {
    display: flex;
    justify-content: center;

}

5) Свойство grid (современное)

Еще один современный способ выравнивания — это grid. Добавляем родителю всего два grid свойства, а вложенному блоку — три grid свойства.


<div class="wrap grid-parent">
    <div class="block grid-child"></div>
</div>

.grid-parent {
    display: grid;
    grid-template-areas: "a";
}

.grid-child {
    grid-area: a;
    justify-self: center;
}

Источник

Просмотров:

Добавить комментарий

Adblock
detector