Центр навигационного меню Текст

Question

Мне нужна помощь! Я что-то работаю, и я не могу заставить его работать. :) Я хочу, чтобы текст выравнивался по центру. Вот изображение: http://imageshack.us/photo/my-images/266/sn54.jpg/

Может ли кто-нибудь дать мне какой-либо отзыв, пожалуйста? Благодарю.

Вот код, что я использую:

HTML:

<div id="container"> 
    <div id="header"> 
      <ul class="nav"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="#">Protfolio</a></li> 
       <li><a href="#">About Me</a></li> 
       <li><a href="#">Contact Me</a></li> 
      </ul> 
    </div><!-- header end --> 
    </div><!-- container end --> 

CSS:

#header{ 
position: relative; 
margin: 60px 0 0 0; 
width: 100%; 
height: 80px;} 

.nav{ 
background: url(../images/navbar.png) no-repeat 0 0; 
width:100%; 
height:80px; 
text-align:center; 
display:block;} 

.nav li{ 
float:left; 
list-style: none; 
margin: 10px;} 

.nav li a{ 
width:150px; 
text-shadow: 0 2px 1px rgba(0,0,0,0.5); 
display: block; 
text-decoration: none; 
color: #f0f0f0; 
font-size: 1.6em; 
margin: 0 .5em;} 

.nav li a:hover { 
margin-top: 2px; 
background-color: #d0d5d6;} 

Answer 1

Простым способом это добавить дополнение к вашему nav элемент справа и слева равен ширине ленточных секций.

.nav { 
    padding:0 XXpx; /* XXpx = width of the ribbon ends */ 
} 


.nav li { 
    width:25%; 
    text-align:center; 
    margin:0; 
} 

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

В качестве альтернативы ознакомьтесь с этим руководством по созданию этого типа ленты только с помощью CSS и не полагайтесь на изображение вообще: http://css-tricks.com/snippets/css/ribbon/

Answer 2

Не зная размеры фонового изображения его трудно быть конкретным, но попробовать помещая фон в элемент заголовка, а не на навигацию. Затем вы можете установить ширину навигационной UL по ширине внутренней части изображения ленты и установить для нее 0 автофокусом, чтобы центрировать ее горизонтально

Answer 3

Я бы обернул ul с div, и этот div имеет фоновое изображение. Чем вы можете настроить ul.