Не могу разместить блоки по центру тега nav
nav {
text-align: center;
}
figure {
background: #5f6a72;
/* Цвет фона */
padding: 1%;
/* Поля вокруг */
display: inline-block;
/* Строчно-блочный элемент */
width: 150px;
/* Ширина */
height: 250px;
/* Ширина */
float: left;
/* Блоки выстраиваются по горизонтали */
margin: 10px 10px 10px 10px;
/* Отступы */
text-align: center;
/* Выравнивание по центру */
}
figcaption {
display: block;
color: #fff;
/* Цвет текста */
}
@media only screen and (max-width: 800px) {
.choice:nth-of-type(2n + 2) figure {
float: none;
}
}
<nav>
<section class="choice">
<figure>
<h1><a href=''>Последнее обновление</a></h1>
<p><img src='pic1.jpg' alt='Все квартиры за сегодня'></p>
<figcaption>Адреса и описания / Все варианты за сегодня</figcaption>
</figure>
</section>
<section class="choice">
<figure>
<h1><a href=''>По районам СПб</a></h1>
<p><img src='pic1.jpg' alt='Квартиры по районам и метро'></p>
<br />
<figcaption>Длительная аренда по районам
<br />и станциям метро</figcaption>
</figure>
</section>
<section class="choice">
<figure>
<h1><a href=''>Однокомнатные,<br /> двухкомнатные,<br /> 3ккв и более</a></h1>
<p><img src='pic2.jpg' alt='1ккв, 2ккв, 2ккв'></p>
<figcaption>База квартир
<br />по количеству
<br />комнат</figcaption>
</figure>
</section>
<section class="choice">
<figure>
<h1><a href=''>Посуточные квартиры</a></h1>
<p><img src='pic2.jpg' alt='Аренда на несколько дней'></p>
<figcaption>
<br />Квартиры в аренду на короткие сроки</figcaption>
</figure>
</section>
</nav>
Я, к сожалению, в CSS не сильна. Буду очень признательна за помощь.