Выровнять центральное меню внутри div

Question

Возможный дубликат:
Можем ли мы центрировать эти div'ы "IE7 и выше" с переменной шириной по горизонтали, не используя inline-block?

Я пытаюсь создать меню с фоновым изображением, охватывающим всю ширину экрана, с содержимым меню, ограниченным до 980 пикселей в середине, с содержимым меню, затем выровненным по центру этого.

Как это: http://d.pr/i/eYcV

Но я не хочу ограничивать область больше, чем 980px, поскольку пункты меню могут увеличиться в будущем.

У меня есть следующая структура в HTML:

<div class="menu">
  <nav class="primary_menu">
      <ul id="menu-primary">
           <li><a href="http://localhost:8888/maldonfire/">Home</a></li>
           <li><a href="http://localhost:8888/maldonfire/blog/">Blog</a></li>
      </ul>
  </nav>        
</div>

Со следующим CSS:

/* Menu */
.menu{
background: url("images/menu_bg_home.jpg") repeat-x;
height: 70px;
}
.primary_menu{
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
}
.primary_menu ul{
text-align: center;
list-style-type: none;
}
.primary_menu ul li{
float: left;
}

Спасибо

Answer 1

Есть много способов добиться того, что вы просите... проще всего с помощью inline-blocks как это

.primary_menu ul{
    text-align: center;
}
.primary_menu ul li{
    /*float: left;*/
    display:inline-block;
    margin: 0 20px;
    *display : inline; /* for IE7 and below */
    zoom:1;
}

Проверьте мой ответ здесь: Можем ли мы центрировать эти div "IE7 и выше" с переменной шириной по горизонтали, не используя inline-block?

Answer 2

Изменение ваших.primary_menu li из float: left для отображения: inline-block должен выровнять пункты меню по центру

Answer 3

Попробуйте это демо или это демо2

.menu{
background:#ccc;
  padding:10px;
}
.primary_menu{
  background:#999;
display: block;
margin: 0px auto;
width: 980px;
height: 70px;

}
.primary_menu ul{
text-align: center;
list-style-type: none;
 margin:0px;
  overflow:auto;


}
.primary_menu ul li{
float: left;
line-height:4;
padding:5px;  
}

Answer 4

Работает jsFiddle - посмотрите:

http://jsfiddle.net/dane/FyThW/21/

/* Menu */
.menu{
background-color: gray;
height: 70px;
}
.primary_menu{
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
background-color: lightgray;
}
.primary_menu ul{
list-style-type: none;
text-align: center;
}
.primary_menu ul li{
    display: inline-block;
}​