Всем привет! В этом материале я расскажу, как выравнивать по центру блоки, чья ширина может изменяться динамически .
Всем привет! В этом материале я расскажу, как выравнивать по центру блоки, чья ширина может изменяться динамически.
Мы уже знаем, как выравнять элемент, ширина которого нам известна. Нужно просто добавить margin: 0 auto; Однако если мы не знаем ширину элемента, его свойство width, соответственно, будет отсутствовать, и этот способ уже, увы, не сработает. Как поступать в таких случаях? Давайте узнаем.
Хорошим примером будет блок постраничной навигации. Он может содержать в себе ссылки на 3 страницы, 10 страниц и т.д. Мы не можем задать ему какую-то одну ширину. Давайте сверстаем такой блок.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation</title>
</head>
<body>
<div class="pagination">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</body>
</html>
Теперь зададим стили.
#pagination ul {
margin: 0 auto;
overflow: hidden;
display: table;
}
#pagination ul li {
float: left;
border: 1px solid #ccc;
padding: 5px 8px;
margin-right: 3px;
}
Т.е. все, что вам нужно сделать, это добавить блоку display: table; Почему это работает? Как вы знаете, таблицы не занимают 100% ширину, их ширина вычисляется в зависимости от контента, поэтому браузер будет ужимать блок до тех размеров, которые нужны контенту, и, таким образом, он будет знать его ширину и сможет выравнять блок по центру через обычный margin: 0 auto; Спасибо за внимание.
