Как настроить центр навигации?

У меня есть сценарий здесь для моей панели навигации:Как настроить центр навигации?

<style type="text/css"> 
/* Navigation Bar */ 
#nav_bar { 
    display:inline-block; 
    height:50px; 
} 
#nav_bar ul { 
    display:inline-block; 
    list-style-type: none; 
    border: 1px solid red; 
    width: 565px; 
    height: 100%; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
} 
#nav_bar li { 
    display:inline; 
    height:100%; 
    padding: 0; 
    margin: 0; 
} 
#nav_bar a:hover { 
    background-color: #000000; 
} 
#nav_bar a { 
    display:inline-block; 
    height: 100%; 
    color:white; 
    text-decoration:none; 
    line-height: 50px; 
    padding: 0 1em 0 1em; 
    background-color: #900000; 
} 
</style> 
</font>

У меня возникли проблемы при попытке получить его отображается в центре страницы, как я могу это сделать? Я посмотрел на "display: inline-block;" и «position: relative» и не смог найти код, который работал . Часть html моей навигационной панели выглядит следующим образом (в отношении ваших комментариев). Я надеюсь, что это поможет! :)

<div id="nav_bar"> 
      <ul> 
       <li> <a href="#">Home</a> </li> 
       <li> <a href="#">Forums</a> </li> 
       <li> <a href="#">Shipping Info</a> </li> 
       <li> <a href="#">Contact us</a> </li> 
       <li> <a href="#">About us</a> </li> 
      </ul> 
     </div>

источник

2013-06-12 ThunderToes

Вы можете использовать 'text-align: center' под' # nav_bar', который мог бы работать, но без кода (HTML) это трудно сказать. – Albzi

Возможно, вы захотите добавить HTML-сообщение, содержащее '# nav_bar', к вашему сообщению. – Lynn

как это вы имеете в виду?

– ThunderToes

Дайте ему ширину и автомаршрут и убедитесь, что элемент уровня блока.

По умолчанию «div» является элементом уровня блока, поэтому вы можете удалить это правило.

Вы должны установить ширину или меню с расширением до ширины своего контейнера.

#nav_bar { 
    display:block; 
    height:50px; 
    margin: 0 auto; 
    width: 567px; /* or whatever you require */ 
}

Пример: http://jsfiddle.net/29FRa/

источник

2013-06-12 10:33:42

Почему проголосовали? Я поддержал его, потому что его действительный – ErikMes

Но удалите дисплей: inline-block; – Kyle

это сработало, я приму это как ответ за 3 минуты ... когда это позволит мне – ThunderToes

#nav_bar { 
    height:50px; 
    width:800px; 
    margin:0 auto; 
}

HTML:

<html> 
<body> 
    <div id="#nav_bar"></div> 
</body> 
</html>

источник

2013-06-12 10:34:08

Я думаю, что у него уже есть этот HTML-код -_- –

Родитель нуждается в определенной ширине. – Kyle

Использование text-align: center; на вашем #nav_bar и быть уверенным, что это элемент уровня блока.

http://jsfiddle.net/TKMeU/

источник

2013-06-12 10:37:29 Tum

В общей сложности шести видов методов: 1, маржа и ширина достичь горизонтального центр

#nav_bar { 
    height:50px; 
} 
#nav_bar ul { 
    list-style-type: none; 
    border: 1px solid red; 
    width: 565px; 
    height: 100%; 
    text-align: center; 
    padding: 0; 
    margin-left: auto; 
    margin-right: auto; 
}

пожалуйста, смотрите demo. 2, использовать встроенный блок, как это:

#nav_bar { 
    height:50px; 
    text-align: center; 
} 
#nav_bar ul { 
    list-style-type: none; 
    display: inline-block; 
    border: 1px solid red; 
    width: 565px; 
    height: 100%; 
    text-align: center; 
    padding: 0; 
    text-align: center; 
    font-size: 0; 
    letter-spacing: -4px; 
    word-spacing: -4px; 
} 
#nav_bar li { 
    margin: 0 5px; 
    display: inline-block; 
    *display: inline; 
    zoom:1; 
    letter-spacing: normal; 
    word-spacing: normal; 
    font-size: 12px; 
}

пожалуйста просмотреть demo.

3, используйте поплавок, например:

#nav_bar { 
    float: left; 
    width: 100%; 
    overflow: hidden; 
    position: relative; 
} 
#nav_bar ul { 
    list-style-type: none; 
    width: 565px; 
     height: 50px; 
    height: 100%; 
    padding: 0; 
    clear: left; 
     float: left; 
     position: relative; 
     left: 50%;/*整个分页向右边移动宽度的50%*/ 
     text-align: center; 
} 
#nav_bar li { 
    margin: 0 5px; 
    display: block; 
    height: 50px; 
    float: left; 
    position: relative; 
    right: 50%;/*将每个分页项向左边移动宽度的50%*/ 
} 
#nav_bar a:hover { 
    background-color: #000000; 
} 
#nav_bar a { 
    display:block; 
    height: 100%; 
    color:white; 
    text-decoration:none; 
    line-height: 50px; 
    padding: 0 1em 0 1em; 
    background-color: #900000; 
}

Пожалуйста осмотрите demo.

Другие методы, вы можете нажать here.

источник

2013-06-12 10:54:55 Airen

Как настроить центр навигации?

ответ

Смежные вопросы