CODEWITHSUNDEEP
csshtmlcss-float
FlyingCat
FlyingCat

Reputation: 14250

how to center my floated navigation menu?

I would like to center my floated menu(ul tag)in my page and can't figure out what's wrong with my css. Please help. Thanks.

My html

<section>
    <div id='index'><img src='images/index_pic.png' title='index Picture'/></div>
    <nav>
        <ul>   ////I want to center this menu, but the 3 buttons all float to left.
            <li id=browser ><a href=#></a></li>
            <li id=user_management><a href=#></a></li>
            <li id=log_out><a href=#> </a></li>
        </ul>

    </nav>
</section>

and my css

section {
    color: blue;
        margin: 0 auto;
    color:blue;
    width:980px;
    height:700px;
}
ul{

    list-style:none;
}

#browser a{
    color:red;
    width:270px;
    height:32px;
    display:inline-block;
    float:left;
    background-image:url('../images/browser_BT.jpg');
}
#user_management a{
    color:red;
    width:270px;
    height:32px;
    display:inline-block;
    float:left;
    background-image:url("../images/user_management_BT.jpg");
}
#log_out a{
    color:red;
    width:270px;
    height:32px;
    display:inline-block;
    float:left;
    background-image:url('../images/log_out_BT.jpg');
}


section #index img{
padding:3px;
border:1px solid #a6a6a6;
}

Upvotes: 2

Views: 1497

Answers (1)

coryetzkorn
coryetzkorn

Reputation: 666

Try this:

ul {
    list-style: none;
    width: 810px;
    margin: 0 auto;
}

Upvotes: 1

Related Questions