Как я могу центрировать неупорядоченный список плавающих элементов на странице - PullRequest
Новая
       28

Как я могу центрировать неупорядоченный список плавающих элементов на странице

2 голосов
/ 15 июня 2011

Если у меня есть неупорядоченный список, например, 

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">About</a></li>
    <li><a href="index.html">Service</a></li>
    <li><a href="index.html">Blog</a></li>
</ul>

Использование CSS для их правильного выравнивания, например 

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul li {
    float: left;
    line-height: 50px;
    margin-left: 5px;
    margin-right: 5px;
}
ul li a {
    display: block;
    height: 46px;
    padding-left: 5px;
    padding-right: 5px;
}

Как я могу затем выровнять элемент <ul> по центрустраницы, имея в виду, что для каких-либо элементов не указана ширина?

Предпочтительный ответ будет совместим в ie6 +

любая помощь приветствуется.

Jai

1 Ответ

5 голосов
/ 15 июня 2011

Вы можете использовать display: inline-block в сочетании с text-align: center.

Вот реализация этого с вашим кодом: http://jsfiddle.net/kRDsf/

Если вам нужна поддержка IE7: http://jsfiddle.net/kRDsf/1/ + Встроенный блок не работает в Internet Explorer 7, 6

Если вам нужна поддержка IE6, см. Комментарии к этому ответу.

...