代码之家 › 专栏 › 技术社区 › Dave

无法使用文本对齐将文本居中:居中

text-alignment center css twitter-bootstrap html

Dave · 技术社区 · 7 年前

我不知道这是否是因为我在使用引导,但我很难将文本集中在标题元素中。我有

    <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/ . 我还需要做什么才能将其居中?

2 回复 | 直到 7 年前

Matt Spinks 7 年前

您正在将文本居中放置在 a 要素但是你的 一 元素的显示属性为 inline 是实际上居中,但它在 一 元素,以及 一

要么把你的 a内的元素 div ( 部门 block 默认情况下),并将定心属性赋予该属性 部门

   <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>

一 元素具有 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;
}

ScaisEdge 7 年前

<a ... 元素i无用。。试着把你的标志锚定在一个div宽度100%和文本中心对齐,例如:

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

推荐文章

HappyMe · HTML/CSS-如何在三个div中居中,独立于周围的div

6 年前

Sam · 使用Bootstrap 4将图像居中放置在另一个图像的顶部

6 年前

azro · 将不同大小的图像居中的通用方法

6 年前

AnonymousPug 55 · 如何使用Python 3在Tkinter中居中放置标签?

6 年前

PatrikJ · 宽度灵活的灯箱

6 年前

Leon N · 在HTML和CSS页面上居中显示图像

7 年前

Dave · 无法使用文本对齐将文本居中:居中

7 年前

user7803115 · 在较小的父对象中水平居中旋转div

7 年前

Natesh bhat · 如何将QComboBox中的文本设置为与中心对齐,而不使其在PyQt中可编辑

7 年前

Wilson · 使用以css为中心的页面剪裁或省略号文本困难

7 年前