가로 내비게이션을 중앙에 놓고 싶습니다

Question

나는 곡선 형 탭이있는 수평 탐색 장치가 있습니다. 화면 해상도가 무엇이든 상관없이 내 수평 탐색을 중심에 놓고 싶습니다. 현재 수평 탐색은 왼쪽 여백에서 260 픽셀 떨어져 있습니다. 따라서이 방법 대신 화면 해상도에 관계없이 화면의 중앙에 맞추기를 원할 것입니다.

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

변경과 같이 당신의 CSS에서 UL의 여백 규칙 :

ul#toc{ 
    margin: 0 auto;} 

이가 있습니다 브라우저 automatica 너의 ul 요소의 양쪽 여백과 같습니다.

또한 너비를 100 %로 고정 너비로 ​​지정해야합니다. 너비가 화면의 전체 너비에 맞을 때 가운데에 맞출 수 없습니다.