+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Выровнять несколько блоков div по центру | Центрируем несколько div

В этой статье мы расскажем как расположить несколько блоков по центру.
Для начала рассмотрим html код
<!doctype html>
<html><head>
<title>Центрирование блоков</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Здесь будут наши блоки</h1>
<br><br>

<div class="inthis">
<div class="block">Первый блок</div>
<div class="block">Второй блок</div>
<div class="block">Третий блок</div>
<div class="block">Четвертый блок</div>
<div class="block">Пятый блок</div>
</div>

</body>
</html>
Нам нужно чтобы элементы с классом "block" были по центру элемента с классом "inthis"

Пишем код css
.inthis{
text-align:center;
width:60%;
border:2px solid gray;
background:silver;
box-shadow:0 0 10pt #727272;
padding:10pt;
border-radius:4pt;}
.block{
margin:10pt;
padding:10pt;
border:2px solid red;
border-radius:4pt;
width:200px;
height:100px;
display:inline-block;
vertical-align: middle;}
/*
для любимого IE блокам с классом block добавляем
_display:inline;
*display:inline;
*/
Готово

Результат


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 10088