Align center menu within div

Question

Possible Duplicate:
Can we center those divs “IE7 and up” with variable width horizontally without using inline-block?

I am trying to create a menu which has a background image spanning the full width of the screen with the menu contents constrained to 980px in the middle with the menu contents then aligned within the center of that.

Like this: http://d.pr/i/eYcV

But I don't want to constrain the area anymore than 980px as the menu items may increase in the future.

I have the following structure in 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>

With the following 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;
}

Thanks

do you mean something like min-width:980px; – intelis Oct 10 '12 at 10:30 — intelis, Oct 10 '12 at 10:30

score 1 · Accepted Answer · edited May 23 '17 at 12:12

There're a lot of ways to achieve what you're asking for ... simplest is by using inline-blocks like this

.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;
}

Check my answer here : Can we center those divs "IE7 and up" with variable width horizontally without using inline-block?

score 1 · Answer 2 · answered Oct 10 '12 at 10:38

1

Changing your .primary_menu li's from float: left to display: inline-block should get the menu items center aligned

answered Oct 10 '12 at 10:38

Lafinboy

160
5

score 0 · Answer 3 · answered Oct 10 '12 at 10:38

try this demo or this demo2

.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;  
}

score 0 · Answer 4 · answered Oct 10 '12 at 10:45

Working jsFiddle - take a look:

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;
}

Align center menu within div

4 Answers4

Linked