Question

我不知道这是因为我使用了bootstrap，但是我的标题元素中的文本难以集中。我有

    <header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <a id="logo" href="#">My Logo Text</a>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">Member Currencies</a></li>
      </ul>
    </nav>
  </div>
</header>

我添加了这个CSS

#logo {
  text-align: center;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

但徽标文字没有居中，正如您在此处所见 - https://jsfiddle.net/vuout1bj/。我还需要做些什么才能让它居中呢？

Answer 1

<a ...元素的对齐中心我不习惯。尝试将您的徽标锚放在div宽度100％和文本对齐中心内，例如：

 <div class="container">
    <div style="width:100%; text-align:center;">
        <a id="logo" href="#">My Logo Text</a>
    </div>
     ...

Answer 2

您将a元素内的文本居中。但是，您的a元素的显示属性为inline。您的文字实际上居中，但它位于a元素内部，a元素的宽度由内容决定。因此，您尝试实现的视觉效果并不明显。

将a元素放在div内（div＆＃39}默认显示属性为block），并将居中属性设置为那div：

   <header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <div style='text-align:center;'>
        <a id="logo" href="#">My Logo Text</a>
    </div>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">Member Currencies</a></li>
      </ul>
    </nav>
  </div>
</header>

或者，只需让您的a元素具有display:block属性：

#logo {
  display:block;
  text-align: center;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0px;
  padding-top: 9px;
  font-weight: bold;
}

无法使用text-align：center居中文本

2 个答案: