Заметка по Верстке. Как расположить несколько div в линию и по центру.

Привет! Время от времени буду делать записи по хитрости верстки. Часто бывает, что найдя какое-то решение, хочется его сохранить, так что подобные статьи будут такого характера.

Итак. Есть задача. Разместить внутри div несколько div в ряд, да еще и по центру.
Как известно, div центрируется следующим способом:

.div-class{ margin: 0 auto; }

Но, в нашей ситуации это не помогло. А помогло такое решение. Пример:

<div class="container">
    <div class="item" style="width:123px;background-color:red;"></div>
    <div class="item" style="width:234px;background-color:green;"></div>
    <div class="item" style="width:234px;background-color:#000;"></div>
</div>

и css

.container {
    text-align: center;
}

.item {
    display: inline-block;
    height: 100px;
}

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *