Theo chiều ngang Trung tâm một UL bên trong một DIV

Question

Tôi có một div với một ul bên trong, tôi muốn căn giữa màn hình ul theo chiều ngang của màn hình.

Mã đầy đủ của dự án có thể được tìm thấy ở đây: jsfiddle

Tôi đã cố gắng sử dụng:

margin: 0 auto; /* After setting the width of course */ 
text-align: center; /* Ran out of ideas!! */ 

Tôi cũng đã cố gắng định vị tương đối và thiết lập% thay vì px, nhưng điều này không cho tôi chính xác trung tâm của màn hình, và cũng có thể, nếu tôi đã thêm nhiều mục vào menu, nó sẽ không là trung tâm sau khi đưa chúng vào mục (sử dụng%).

Mã đầy đủ của tôi là ở jsfiddle cho tất cả những gì bạn cần.

tôi đã dán một số (những gì tôi nghĩ là) mã có liên quan dưới đây thuận tiện cho bạn:

CSS:

/* Main*/ 
ul#nav { 
display: inline-block; 
padding: 0px; 
list-style-type: none; 
white-space: nowrap; 
position: relative; 
top: 10px; 
left: 10%; /* This is what im currently using, but as thought, it doesnt work as needed :(*/ 
border: 2px solid chocolate; 
-moz-border-radius: 10px; /* Border Radius for Mozilla Firefox */ 
border-radius: 10px;  /* Border Radius for everything else*/ 
} 

ul#nav li { 
float: left; 
font-family: 'Myraid Pro', Arial, Helvetica, sans-serif; /*Use available font for menu */ 
font-weight: bold; 
margin: 0; 
padding: 5px 0 4px 0; 
background-color: #ee8043; /*Background Colour for the <li>*/ 
padding: 5px;    /* Padding for the LI */ 
-moz-border-radius: 8px; /* Border Radius for Mozilla Firefox */ 
border-radius: 8px;  /* Border Radius for everything else*/ 

}

HTML:

 <div id="header"> 
     <a href="index.html"><img id="logo" src="images/Dafne_Logo.png"/></a> 

     <div id="navbar"> 
      <ul id="nav"> 
       <li><a href="index.html" rel="home">Home</a></li> 
       <li class="menu_separator">|</li> 
       <li><a href="index.html">News</a></li> 
       <li class="menu_separator">|</li> 
       <li><a href="forums.html">Forums</a></li> 
       <li class="menu_separator">|</li> 
       <li><a href="signup4327.html?to=%252F">Signup</a></li> 
       <li class="menu_separator">|</li> 
       <li><a href="login4327.html?to=%252F">Login</a></li> 
       <li class="menu_separator">|</li> 
      </ul> 
     </div> 

    </div> 

    <div id="coloured_bar"></div> 

---

Vì vậy, về cơ bản, tôi muốn tập trung cáC#nav mà được chứa trong cáC#navbar, được chứa trong # header.

Answer 1

Thêm text-align:center vào số #navbar div nên làm điều đó vì danh sách của bạn là inline-block.

Bạn sẽ phải xóa left:10% nếu bạn muốn nó căn giữa.

Answer 2

Ở đây bạn đi: http://jsfiddle.net/gzB6a/ tôi thêm

div#navbar { 
    text-align: center; 
} 

Và loại bỏ

the ul#nav { left: 5%; }