CODEWITHSUNDEEP
htmlcsshtml-lists
jeffkee
jeffkee

Reputation: 5238

Trying to center align UL but the width defaults to 100%

http://anaya.sonikastudios.com/

The HTML:

<div id="menubar" class="grid_12 alpha omega">
    <ul id="menu">
        <li><a href="#" title="Diamond Engagement Ring Sets">Engagement Sets</a></li>
        <li><a href="#" title="Diamond Solitaires">Solitaires</a></li>
        <li><a href="#" title="Diamond Three Stone Rings">Three Stone Rings</a></li>
        <li><a href="#" title="Diamond Anniversary Rings">Anniversary Rings</a></li>
        <li><a href="#" title="Diamond Gentleman's Rings">Gent's Rings</a></li>
        <li><a href="#" title="Diamond Earrings">Earrings</a></li>
        <li><a href="#" title="Diamond Pendants">Pendants</a></li>
        <li><a href="#" title="Diamond Bracelets">Bracelets</a></li>
    </ul>
</div>

Very simple, really.

Then we have the CSS:

#menubar {
    height: 22px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background-image: url('/images/menubar_bg.png');
    background-repeat: repeat-y;
    text-align: center;
}

#menu {
    padding:0px;
    height: 20px;
    list-style:none;
    white-space: nowrap;
    position: relative;
    margin: 1px auto;
}

#menu li {
    display:inline;
    padding: 0px 11px 0px 10px;
    margin: 5px 0px;
    list-style:none;
    position: relative !important;
    background-image: url('/images/menu_item_tick.png');
    background-position: right center;
    background-repeat: no-repeat;
    text-align: center;
    float: left;
}

I tried putting width:auto; on the UL element (#menu) but to no use... I want the UL element ot be centered and NOT 100% of the width automatically - it should adjust to the content, and the # of LI elements in it.

Upvotes: 1

Views: 2767

Answers (1)

Tom
Tom

Reputation: 30698

Remove the float: left from your <li> elements and the <ul> will center.

If you for some reason must have the <li> elements floated, look for info around horizontally-centered floated lists, such as explained here for example: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support.

Upvotes: 4

Related Questions