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>等选项，则无效。

Answer 1

如果您指的是在菜单栏中居中整个菜单，我建议您对CSS进行以下调整：

将整个UL列表按正确的容器宽度的50％推送：

ul {
  ...
  left: 50%;
}

将每个LI元素向左推50％的UL宽度：

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

防止由右侧UL溢出引起的水平滚动条：

.lavalamp {
  ...
  overflow:hidden;
}

如何在css菜单中居中我的文字？

1 个答案: