CODEWITHSUNDEEP
csslayouthtml-lists
user2012181
user2012181

Reputation: 13

How to center a ul within a div menu

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

Upvotes: 1

Views: 957

Answers (1)

kapa
kapa

Reputation: 78671

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

Upvotes: 2

Related Questions