Want to center my horizontal navigation

Question

I have a horizontal navigation with curved tabs. I want to center my horizontal navigation relative to whatever the screen resolution is. Currently, my horizontal nav is 260px away from the left hand margin. So instead of this way, just want to make it centered to the screen regardless of screen resolution.

base_menu.html

<ul id="toc">
        <li><a href="{% url mmc.views.return_clients %}"><span>Home</span></a></li>
        <li><a href="{% url mmc.views.quote_step1 %}"><span>Create quote/order</span></a></li>
        <li><a href="{% url mmc.views.search_item %}"><span> Item Search</span></a></li>
        <li><a><span>Service orders</span></a><br/>
        <ul class="subnav">
                <li><a href="{% url mmc.views.order_list %}"><span>Storage orders</span></a></li>
                <li><a href="{% url mmc.views.order_list_service 1 %}"><span>Delivery orders</span></a></li>
                <li><a href="{% url mmc.views.order_list_service 2 %}"><span>Collection orders</span></a></li>
        </ul>
        </li>
        <li><a><span>Collection/Delivery</span></a><br/>
        <ul class="subnav">
                <li><a href="{% url mmc.views.service_list 1 %}"><span>Delivery list</span></a></li>
                <li><a href="{% url mmc.views.service_list 2 %}"><span>Collection list</span></a></li>
        </ul>
        </li>
        <li><a><span>Admin Tools</span></a><br/>
        <ul class="subnav">
                <li><a href="{% url mmc.views.invoice_list %}"><span>Export for invoicing</span></a></li>
                <li><a href="{% url mmc.views.dbbackup %}"><span>Backup data</span></a></li>
        </ul>
        </li>
        <li><a href="{% url mmc.views.help_login %}" target="_blank" onclick="return showAddAnotherPopup(this);"><span>Help</span></a></li>
</ul>

base.css

ul#toc {
    height: 2em;
    list-style: none;
    margin-left: 260px;
    padding: 0;
    position: relative;
    width: 100%;
}


ul#toc li{
    background:#ffffff url(../images/tab.png);
    float: left;
    margin: 0 1px 0 0;

}

ul#toc li#drop{
    background-color:#bce6c3;
    float: left;
    margin: 0 1px 0 0;

}
ul#toc span {
    background: url(../images/tab.png) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}

ul#toc a {
    color: #000000;
    height: 2em;
    float: left;
    text-decoration: none;
    padding-left: 10px;
}


ul#toc a:hover {
    background: url(../images/tab2.png);
    text-decoration: underline;
}

ul#toc a:hover  span{
    background: url(../images/tab2.png) 100% 0;

}

Answer 1

Change the margin rule for your ul in your css like so:

ul#toc{
     margin: 0 auto;}

This makes the browser automatically equal the margin either side of your ul element.

Also you need to give your ul#toc a fixed width as with a width of 100% it cannot center anything as it fits the whole width of the screen.