Question

我正在尝试创建一个居中文本的导航栏。 div（#navBar）是一个蓝色条，以40px的高度拉伸屏幕。在div内部，是一个无序列表，它具有display：inline属性。另外，clear：两个属性都用于我的其他元素，为简洁起见，此处未显示。这是我的代码：

HTML code：

<div id="navBar">
    <ul>
        <li>Lifestyle</li>
        <li>Science</li>
        <li>Tech</li>
        <li>Strange</li>
        <li>Entertainment</li>
        <li>Society</li>
    </ul>
</div>

CSS：

#navBar{
    width: 100%;
    height: 40px;
    background-color: #1D70B7;
    clear: both;
    margin-top: 20px;
    position: relative;
}

#navBar ul{
    position: absolute;
    top: 20px;
    text-align: center;
}

#navBar li{
    display: inline;
    color: white;
    font-size: 20px;
    margin-left: 35px;
    font-family: sans-serif;
}

我不明白为什么我的文字没有使用text-align属性与中心对齐。我也不明白为什么我的文字没有与顶部：20px属性对齐到条形图的中心（考虑到条形图的高度为40px）。

Answer 1

请尝试以下代码：

＆＃13;

#navBar {
  background-color:#1D70B7;
  height:40px;
  margin-top:20px;
  position:relative;
  width:100%;    
}

#navBar ul {
  padding:0;
  text-align:center;
}
#navBar li {
  color:#fff;
  display:inline;
  font-family: sans-serif;
  font-size:20px;
  line-height:40px;
  padding:0 15px;    
}

＆＃13;

<div id="navBar">
  <ul>
    <li>Lifestyle</li>
    <li>Science</li>
    <li>Tech</li>
    <li>Strange</li>
    <li>Entertainment</li>
    <li>Society</li>
  </ul>
</div>

＆＃13;

<强>解释
您应该从position: absolute;中删除top: 20px;和#navBar ul。现在文本在栏上，但不是垂直居中。现在，您必须将line-height的{{1}}设置为导航栏的高度（40px）。

这个有效！但是，由于您使用li在li元素之间创建了一些空格，因此margin-left元素并未处于中心位置。删除此内容并添加li或padding:0 17px;。

修改您的评论：
您必须将margin:0 17px;添加到padding:0;以删除左侧的填充（示例已更新）。

Answer 2

尝试此css，您不需要为#navBar

设置高度

#navBar {
    width: 100%;
    background-color: #1D70B7;
    clear: both;
    position: relative;
}
#navBar ul {
    position: relative;
    text-align: center;
    padding: 10px 0px;
}

检查演示http://jsfiddle.net/Ugc5g/6499

Answer 3

默认情况下，

ul有边距和填充，您应该reset it by css。但是，#navBar ul有position:absolute;，其中以下列样式为中心：

#navBar ul {
  position: absolute;
  text-align: center;
  right: 0;
  left: 0;
  margin: 0 auto;
  line-height: 40px; //height of parent #navBar
}

要垂直对齐，您可以使用line-height:40px。

Jsfiddle

以文本为中心的文本

3 个答案: