Блог

Главная - Вопросы по программированию - Центрирование по горизонтали UL

Центрирование по горизонтали UL

#html #css #centering

#HTML #css #центрирование

Вопрос:

Кажется, я не могу настроить свой UL по центру в его DIV.

 <div id="sitenavdiv">
    <ul id="sitenav">
        <li class="about"><a href="#" title=""><img src="images/about-link.png" alt="about"></a></li>
        <li class="portfolio"><a href="#" title=""><img src="images/portfolio-link.png" alt="portfolio"></a></li>
        <li class="contact"><a href="#" title=""><img src="images/contact-link.png" alt="contact"></a></li>
    </ul>
</div>

У меня есть следующий CSS:

 #sitenavdiv {padding-top: 30px; width: 620px; position: relative; float: left; text-align:center;}

ul#sitenav {width: 231; margin: 0 auto; display: inline;}
ul#sitenav li.about{width: 64px; height: 31px; display: block; float: left; overflow: hidden;}
ul#sitenav li.about a{width: 64px; height: 31px; display: block;}
ul#sitenav li.about a:hover{width: 64px; height: 31px; display: block; margin-top:-31px;}

ul#sitenav li.portfolio{width: 88px; height: 31px; display: block; float: left; overflow: hidden}
ul#sitenav li.portfolio a{width: 88px; height: 31px; display: block;}
ul#sitenav li.portfolio a:hover{width: 88px; height: 31px; display: block; margin-top:-31px;}

ul#sitenav li.contact{width: 79px; height: 31px; display: block; float: left; overflow: hidden}
ul#sitenav li.contact a{width: 79px; height: 31px; display: block;}
ul#sitenav li.contact a:hover{width: 79px; height: 31px; display: block; margin-top:-31px;}

Я уверен, что это что-то простое, но, похоже, я не могу правильно подобрать комбинацию.

Ответ №1:

Ваше правило для ul#sitenav должно быть:

 ul#sitenav {width: 231px; margin: 0 auto; display: block; }

Обратите внимание на display: block; , и 231px вместо просто 231 .

(Смотрите и редактируйте, добавляя дополнительные цвета, http://jsfiddle.net/eRRjy /)

Комментарии:

1. Удалите display:inline , но нет необходимости устанавливать для него значение block . UL по умолчанию находятся на уровне блоков.

2. Это верно, если ранее не существовало правила, изменяющего это значение по умолчанию. При отсутствии ul { display: inline; } правила ul#sitenav правило можно просто удалить display: block; и покончить с этим.