Горизонтально отцентрируйте UL внутри DIV - PullRequest
Новая
       42

Горизонтально отцентрируйте UL внутри DIV

7 голосов
/ 22 июля 2011

У меня есть div с ul внутри, я хочу центрировать ul по горизонтали экрана.

Полный код проекта можно найти здесь: jsfiddle

Я пытался использовать: 

margin: 0 auto; /* After setting the width of course */
text-align: center; /* Ran out of ideas!! */

Я также пробовал относительное расположение и установку% вместо px, но это не дает мне точный центр экрана, а также, если бы я добавил больше элементов в меню, он не был бы в центре после включения их элементов (используя %).

Мой полный код находится в jsfiddle для всех, с кем можно повозиться.

Для вашего удобства я вставил часть (как мне кажется, ниже) соответствующего кода:

CSS: 

/* Main*/
ul#nav { 
display: inline-block;
padding: 0px; 
list-style-type: none; 
white-space: nowrap;
position: relative;
top: 10px;
left: 10%; /* This is what im currently using, but as thought, it doesnt work as needed :(*/
border: 2px solid chocolate;
-moz-border-radius: 10px; /* Border Radius for Mozilla Firefox */
border-radius: 10px;      /* Border Radius for everything else*/
}

ul#nav li { 
float: left; 
font-family: 'Myraid Pro', Arial, Helvetica, sans-serif;  /*Use available font for menu */
font-weight: bold; 
margin: 0; 
padding: 5px 0 4px 0; 
background-color: #ee8043; /*Background Colour for the <li>*/
padding: 5px;              /* Padding for the LI */
-moz-border-radius: 8px; /* Border Radius for Mozilla Firefox */
border-radius: 8px;      /* Border Radius for everything else*/

}

HTML: 

        <div id="header">
        <a href="index.html"><img id="logo" src="images/Dafne_Logo.png"/></a>

        <div id="navbar">
            <ul id="nav">
                <li><a href="index.html" rel="home">Home</a></li>
                <li class="menu_separator">|</li>
                <li><a href="index.html">News</a></li>
                <li class="menu_separator">|</li>
                <li><a href="forums.html">Forums</a></li>
                <li class="menu_separator">|</li>
                <li><a href="signup4327.html?to=%252F">Signup</a></li>
                <li class="menu_separator">|</li>
                <li><a href="login4327.html?to=%252F">Login</a></li>
                <li class="menu_separator">|</li>
            </ul>
        </div>

    </div>

    <div id="coloured_bar"></div>

В общем, я хочу центрировать #nav, который содержится в #navbar, который содержится в заголовке #.

Ответы [ 2 ]

4 голосов
/ 22 июля 2011

Добавление text-align:center в #navbar div должно сделать это, потому что ваш список inline-block.

Вам придется удалить left:10%, если вы хотите, чтобы он был отцентрирован.

2 голосов
/ 22 июля 2011

Вот, пожалуйста: http://jsfiddle.net/gzB6a/ Я добавил 

div#navbar {
  text-align: center;
}

И удалено 

the ul#nav { left: 5%; }
...