Центрирование ул с плавающей ли - PullRequest
Новая
       2

Центрирование ул с плавающей ли

7 голосов
/ 12 октября 2010

у меня 

<div id="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

Со следующим CSS: 

#container li {
float:left;
height:33px;
line-height:30px;
text-align:center;
width:auto;
}

#container{
 width:600px;
}

Однако у меня возникают трудности с горизонтальным центрированием ul внутри #container. Похоже, мне нужна фиксированная ширина, установленная на ul для margin: 0 auto для работы (нужно text-align: center для IE). Однако я не хочу устанавливать фиксированную ширину для ul, поскольку элементы li будут динамическими.

Пожалуйста, сообщите.

Ответы [ 3 ]

14 голосов
/ 12 октября 2010 
#container {
    width: 600px;
    text-align: center;
}

#container ul {
    display: inline-block;
}

#container li {
    float: left;
    height: 33px;
    line-height: 30px;
}
4 голосов
/ 01 сентября 2012

Вот отличное решение: http://css -tricks.com / centering-list-items-горизонтально-немного хитрее, чем вы могли бы подумать / 

<div id="menu-outer">
    <div class="table">
        <ul id="horizontal-list">
            <li><a href="#"><img src="images/list-item-1.gif" alt="list item 1" /></a></li>
            <li><a href="#"><img src="images/list-item-2.gif" alt="list item 2" /></a></li>
            <li><a href="#"><img src="images/list-item-3.gif" alt="list item 3" /></a></li>
            <li><a href="#"><img src="images/list-item-4.gif" alt="list item 4" /></a></li>
        </ul>
    </div>
</div>

Теперь посмотрите на очень простой CSS, который делает это: 

#menu-outer {
    height: 84px;
    background: url(images/bar-bg.jpg) repeat-x;
}

.table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
}

ul#horizontal-list {
    min-width: 696px;
    list-style: none;
    padding-top: 20px;
}
ul#horizontal-list li {
    display: inline;
}

Это таблица div, которая выполняет свою работу.Иногда я думаю: «Все, что работает».должен быть лозунгом для CSS.

0 голосов
/ 17 июня 2013

в css: 

ul {
   float: left;
}

jquery 

centerize = function(){
        var parentWidth = $("ul").parent("#container").width();
        var width = $("ul").width();
        var dif = (parentWidth - width) / 2;
        $("ul").css("margin-left", dif + "px");

    };

    centerize();

вероятно, вам нужно работать с каждым масштабом браузера, поэтому добавьте: 

$(window).resize(function(){
    centerize();
});
...