无法使用 text-align:center 使文本居中答案

【问题标题】：Unable to center text using text-align:center无法使用 text-align:center 使文本居中
【发布时间】：2018-01-26 09:08:57
【问题描述】：

我不知道这是否是因为我正在使用引导程序，但我在标题元素中居中文本时遇到了困难。我有

    <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/。我还需要做什么才能使其居中？

【问题讨论】：

标签： html twitter-bootstrap css center text-alignment

【解决方案1】：

<a ... 元素的对齐中心我没用.. 尝试将您的徽标锚点放在 div 宽度 100% 和文本对齐中心内，例如：

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

【讨论】：

【解决方案2】：

您将a 元素内的文本居中。但是您的a 元素的显示属性为inline。您的文本 is 实际上居中，但它位于 a 元素内，而 a 元素的宽度由内容决定。所以你想要达到的视觉效果并不是真正可见的。

要么将a 元素放在div 中（div 的显示属性默认为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;
}

【讨论】：