Yatay olarak bir DIV

Question

içinde Merkez İçinde ul ile bir div var, ekranın yatay olarak ul merkezini ortalamak istiyorum. Ben kullanarak denedi jsfiddle

:

projenin tam kod burada bulunabilir

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

Ben de göreceli konumunu ve yerine px ayarı% çalıştı, ancak bunun tam ver ekranın merkezi ve ayrıca, menüye daha fazla öğe eklediysem, onları (% kullanarak) öğelerini ekledikten sonra ortalayamazdım.

TÜM kodunuz, tweet atmanız gereken tüm öğeler için jsfiddle içeridedir.

Kolaylık olması için aşağıda (I düşündüğüm şey) kodun bazı yapıştırılan:

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> 

---

Yani temelde, ben #header içinde yer alan #navbar, içinde yer alan #nav ortalamak istiyorum.

Answer 1

listenizi inline-block çünkü bunu yapması gerektiğini #navbar div'e text-align:center ekleme.

Ortalamasını isterseniz left:10%'u kaldırmanız gerekir. İşte

Answer 2

gitmek: http://jsfiddle.net/gzB6a/ Ben

div#navbar { 
    text-align: center; 
} 

eklendi Ve

the ul#nav { left: 5%; } 

kaldırıldı