居中对齐与Firefox和100％宽度的元素

Z时代
2024-01-10
分类：问答

所以我试图做一个简单的标题，我有文本对齐中心与2px边界运行在此之下。居中对齐与Firefox和100％宽度的元素

代码我已经工作，应该完美地工作在除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>

回答：

使用属性left解决了这个问题：

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

Demo

回答：

因为你的伪元素在position:absolute;它没有在你的内容流中的宽度，并且遵循在父母上设置的text-align:center;（就其绝对值而言，在内容流中，高度和宽度为）。

3种可能性：

添加规则：left:0;无论什么文本排列在母会，将从左coordonates绘制。

添加规则：display:block;所以它像一个块元件和虐待忽略text-align，它会做一个断开线，并且将从left或right绘制（如下文档的direction/dir）。

保持它在流量：

.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; 
}

回答：

试试这个：

@-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; 
    } 
    }