1

Здравствуйте. Столкнулся с проблемой. Есть каталог картинок, реализованный списком <ul>. Блок, содержащий их, - резиновый, поэтому возникает проблема центирования этого списка. Если делать через float: left - выравнивание идет по левому краю, и при некоторых разрешениях справа остается много пустого места, если через присвоение элементам li свойства display: inline-block с последующим выравниванием text-align: center - последняя строка равняется по центру, даже если там, допустим, 1 элемент (справа и слева остается пустота). Есть ли решение для такой задачи?

1
  • display: table, table-cell и прочие табличные свойства пробовали? Также можно подсмотреть, как у bootstrap реализован grid.
    – zhenyab
    22 окт 2014 в 13:16

2 ответа 2

1

Если есть возможность изменения реализации вывода картинок, то лучше переделать в div и уже ими играться, а играться ими можно через Flexbox, очень удобное свойство и сильно может упростить задачу.

Как центрировать последние элементы li, к сожалению, не подскажу, сам долго бился над этой задачей, но решения не нашел. Если бы было известно число выводимых картинок, то можно было бы через javascript посчитать, сколько останется картинок в последней строке, и тогда каким-то образом их отцентрировать, но мне кажется, это те еще грабли.

1

Попробуй такой вариант:

<!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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.