Как выравнять по центру блок переменной ширины.
Всем привет! В этой статье я расскажу, как выравнивать по центру блоки, чья ширина может изменяться динамически.
Мы уже знаем, как выравнять элемент, ширина которого нам известна. Нужно просто добавить 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; Спасибо за внимание.
-
Создано 27.01.2015 19:00:00
-
Михаил Русаков
Комментарии (10):
Почему статьи в последнее время такие редкие?
Ответить
Как говорят для поисковой оптимизации.
Ответить
Да для ширины не так трудно сделать. Есть ещё способ с display: inline-block и у родительского элемента text-align: center - тоже работает. А вот для переменной высоты как сделать... Я имею в виду как просто сделать, без громоздких скриптов с обсчётами всех сторон. Желательно в чистом CSS. Вот это я бы очень хотел знать...
Ответить
Если я вас правильно понял http://goo.gl/vZjDag
Ответить
Да, похоже. Но видимо я что-то делаю не так, и у меня этот метод так и не заработал... Пытался завести в Chrome / Yandex.
Ответить
Нашел тут интересную шпаргалку по тому, как центрировать элементы в css по горизонтали и вертикали. Посмотрите, может там что-нибудь новое для себя найдете (http://goo.gl/StHPPX)
Ответить
Спасибо большое, по-моему это действительно то что нужно и самое полное руководство по этой теме, которое я встречал!
Ответить
Рад, что вам пригодилось!
Ответить
Михаил, я сейчас пригляделся. В HTML-коде вы берете как класс элемента, а в CSS обращаетесь, как к идентификатору(id).
Ответить
я тоже это заметил - #pagination и .pagination - это разные вещи
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.