我該如何將我的文本置於CSS菜單中？

Question

我有一個JavaScript菜單欄的網站，但菜單的文本在左側。

www.sherlock--holmes.tk 

我該如何居中菜單欄文本？

#header { 
    text-aligh: center; 
} 

/*LAVALAMP START*/ 

.lavalamp { 
    position: relative; 
    border: 1px solid #d6d6d6; 
    background: #fff; 
    padding: 15px; 
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
    border-radius : 10px; 
    -moz-border-radius : 10px; 
    -webkit-border-radius : 10px; 
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); 
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); 
    height: 18px; 
} 

.dark { 
    background : rgb(89,89,89); 
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(107,165,177)), to(rgb(58,196,164))); 
    background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); 
    border: 1px solid #272727; 
} 

.magenta li a, 
.cyan li a, 
.yellow li a, 
.orange li a, 
.dark li a { 
    color: #fff; 
    text-shadow: 0 -1px 0 rgba(0,0,0,.40); 
} 

a { 
    text-decoration: none; 
    color: #262626; 
    line-height: 20px; 
} 

ul { 
    margin: 0; 
    padding: 0; 
    z-index: 300; 
    position: absolute; 
} 

ul li { 
    list-style: none; 
    float:left; 
    text-align: center; 
} 

ul li a { 
    padding: 0 20px; 
    text-align: center; 
} 

.floatr { 
    position: absolute; 
    top: 10px; 
    z-index: 50; 
    width: 70px; 
    height: 30px; 
    border-radius : 8px; 
    -moz-border-radius : 8px; 
    -webkit-border-radius : 8px; 
    background : rgba(0,0,0,.20); 
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
} 

如果我嘗試玩<center>這樣的選項，它不起作用。正確的集裝箱寬度的50％

推動整個UL列表：

ul { 
    ... 
    left: 50%; 
} 

Answer 1

如果你指的是菜單欄內居中整個菜單，我建議如下調整你的CSS推由UL寬度的50％左每個L1元素：

li { 
    ... 
    left: -50%; 
} 

防止水平滾動條引起UL右側溢出：

.lavalamp { 
    ... 
    overflow:hidden; 
}