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种可能性：

添加规则：left:0;无论父级的文字对齐方式是什么，都会从左侧的coordonates中提取。
添加规则：display:block;因此它的行为类似于块元素而生病忽略text-align，它将执行断行并将从left或{{1}中提取}（跟随文档的right。）
将其保留在流程中：

direction/dir

Answer 2

使用属性left解决了问题：

.my-title:after {
    left: 0;
}

Demo

Answer 3

试试这个：

@-moz-document url-prefix()
  {
  .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;
  }
  }

中心将元素与firefox和100％宽度对齐

3 个答案: