Выровнять несколько блоков 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;
*/

Готово

Результат

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

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

Опубликовано: 14 февраля 2014 | Просмотров: 28548