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

Question

我不知道这是否是因为我使用的是 bootstrap，但我在 header 元素中难以将文本居中。我有

    <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 默认显示 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 使文本居中

Unable to center text using text-align:center

html

css

center

text-alignment

twitter-bootstrap