Здравствуйте. Столкнулся с проблемой. Есть каталог картинок, реализованный списком <ul>
. Блок, содержащий их, - резиновый, поэтому возникает проблема центирования этого списка. Если делать через float: left
- выравнивание идет по левому краю, и при некоторых разрешениях справа остается много пустого места, если через присвоение элементам li
свойства display: inline-block
с последующим выравниванием text-align: center
- последняя строка равняется по центру, даже если там, допустим, 1 элемент (справа и слева остается пустота). Есть ли решение для такой задачи?
-
display: table, table-cell и прочие табличные свойства пробовали? Также можно подсмотреть, как у bootstrap реализован grid.– zhenyabCommented 22 окт. 2014 в 13:16
Добавить комментарий
|
2 ответа
Если есть возможность изменения реализации вывода картинок, то лучше переделать в div и уже ими играться, а играться ими можно через Flexbox, очень удобное свойство и сильно может упростить задачу.
Как центрировать последние элементы li, к сожалению, не подскажу, сам долго бился над этой задачей, но решения не нашел. Если бы было известно число выводимых картинок, то можно было бы через javascript посчитать, сколько останется картинок в последней строке, и тогда каким-то образом их отцентрировать, но мне кажется, это те еще грабли.
Попробуй такой вариант:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Aleksey" />
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
.menu
{
margin: 20px auto;
max-width: 1000px;
min-width: 400px;
}
.menu ul
{
background: #2d4be5;
display: table-row;
}
.menu ul li
{
display: table-cell;
height: 50px;
width: auto;
text-align: center;
vertical-align: bottom;
}
.menu ul li a
{
color: #FFF;
display: table-cell;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-decoration: none;
font-weight: bold;
vertical-align: middle;
width: 1000px;
height: 50px;
}
.menu ul li a:hover
{
color: #0f9;
}
.menu ul li a:active, menu ul li a.visited
{
color: #9f0;
}
</style>
<title>Урок002</title>
</head>
<body>
<div class="menu">
<ul>
<li>
<a href="#">Обучение</a>
</li>
<li>
<a href="#">Видео уроки</a>
</li>
<li>
<a href="#">Статьи</a>
</li>
<li>
<a href="#">Графика</a>
</li>
<li>
<a href="#">Премиум</a>
</li>
<li>
<a href="#">Форум</a>
</li>
<li>
<a href="#">О нас</a>
</li>
</ul>
</div>
</body>
</html>