html - 使用 Firefox 和 100% 宽度将元素居中对齐

Question

所以我尝试做一个简单的标题，其中文本居中对齐，下方有一个 2px 的边框。

我的代码可以在除 firefox 之外的所有其他浏览器上正常工作，firefox 将页面的边框右对齐，就好像边框的开头在中心对齐一样。如果我删除文本居中对齐，边框会完美放置，但文本显然会向左对齐。为什么 Firefox 这样做？

CSS:

  .my-title {
    position: relative;
    margin-bottom: 70px;
    padding-bottom: 15px;

}
.my-title:after {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #ffd500;
    content: "";
    width: 100%;

}
.align-center {
    text-align: center;
}

HTML:

<div class="row">
      <div class="col-xs-12">
        <hgroup class="my-title align-center">
          <h1>Header</h1>
          <h2>Sub-Header</h2>
        </hgroup>
      </div>
    </div>

Answer 1

由于您的伪元素位于 position:absolute; 中，因此它在您的内容流中没有宽度，并且遵循在父元素上设置的 text-align:center;。(作为绝对值，在内容流中，0 表示高度和宽度)。

3 种可能性:

1. 添加规则:left:0; 无论父级的文本对齐方式如何，都将从左坐标绘制。
2. 添加规则:display:block; 所以它表现得像一个 block 元素并且会忽略 text-align，它会做一个断线并被绘制从 left 或 right(遵循文档的 direction/dir)。
3. 顺其自然:

.my-title {
  position: relative;
  margin-bottom: 70px;
  padding-bottom: 15px;
}
.my-title:after {
  height: 2px;
  background-color: #ffd500;
  content: "";
  width:100%;
  display:inline-block;
  vertical-align:bottom;
}
.align-center {
  text-align: center;
}