-1

我有一个带有 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>，它不起作用。

4

1 回答 1

0

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

将整个 UL 列表向右推容器宽度的 50%：

ul {
  ...
  left: 50%;
}

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

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

防止右侧UL溢出导致水平滚动条：

.lavalamp {
  ...
  overflow:hidden;
}
于 2013-05-30T17:59:21.497 回答