1

I'm trying to center a ul within a div menu. I've looked at other menu's and tried every combination I can think of, yet I still can't get it.

Here's the code:

#cssmenu ul{
    margin:0 auto;
    padding:0;
    list-style-type:none;
    width:100%;
    position:relative;
    display:block;
    height:38px;
    font-size:14px;
    background:#f9f8f8;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    font-family:Arial,Helvetica,sans-serif;
}
#cssmenu li{
    display:block;
    float:left;
    margin:0;
    pading:0;
    }
#cssmenu li a{
    display:block;
    float:left;
    color:#333333;
    text-decoration:none;
    padding:12px 20px 0 20px;
    height:24px;
    height:38px;
    }
#cssmenu li a:hover{
    text-decoration:underline;  
    }


    <div id="cssmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">The Program</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Members Login</a></li>
</ul>
</div>

Any help would be greatly appreciated.

Thanks! Mike

kapa
  • 77,694
  • 21
  • 158
  • 175

1 Answers1

2

You have to remove the width: 100% from the ul first. You can't really center something that is the same size as the container :). After removing that, you could make the list inline-block, so it takes up the width of its children, and then using a simple text-align on the div.

#cssmenu {
    text-align: center;
}

#cssmenu ul{
    display: inline-block;
}

Of course you will have to move some of your styles from the list to the div, because the list is not full width anymore.

jsFiddle Demo

kapa
  • 77,694
  • 21
  • 158
  • 175
  • in order to make this work in older versions of IE (which dont support inline-block) you will have to trigger hasLayout, which you can read about here [link](http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/) – Joel Jan 25 '13 at 20:02
  • @Joel The article is quite dated, all modern browsers support this property now, except IE7, but [the hack is easy](http://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block/6545033#6545033). And IE6, if anybody still cares :). – kapa Jan 25 '13 at 20:04
  • 1
    You sir, are a gentleman and a scholar! It worked like a charm. Thank you very much!!! – user2012181 Jan 28 '13 at 18:51