水平ナビゲーションを中心にしたい

Question

私はカーブしたタブ付きの水平ナビゲーションを持っています。画面の解像度が何であれ、水平ナビゲーションを中心にしたいと思います。現在、水平ナビゲーションは左端から260ピクセル離れています。したがって、この方法の代わりに、画面の解像度に関係なく、画面の中央に配置したいだけです。

ので、あなたのようなCSSの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

変更あなたのULのための証拠金ルール：

ul#toc{ 
    margin: 0 auto;} 

これが作りますブラウザautomatica ul要素の両側のマージンに等しい。

また、ul＃を固定幅にする必要があります。幅は100％で、画面の幅に合わせて中央に配置することはできません。