我该如何将我的文本置于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; 
}