父级

Question

我使用bootstrap和joomla。

我有一个新的设计需要我的div和h2，宽度为1920像素，并且有居中的文字。我所做的是：

    .page-header {
    background-color:#3c4547;
    width:1920px;
    top:0px !important;
    position:relative;
    margin-top:0px;
    display:block;
    padding:20px 0px 25px 0px;
    z-index:999;
    left:-385px;
}

.page-header h2 {
    color: @white;
    font-size:36px;
    font-weight:400;
   margin-left: auto;
    margin-right: auto;
     text-align: center;
}

包装器只有1600像素宽或者其他东西，这就是为什么我会以负余量作弊。

但它不会在调整大小时将文本置于中心位置 - 它需要具有响应性。有什么建议吗？

这是我的HTML代码，我无法编辑它：

<div class="page-header"><h2 itemprop="name">Header text</h2></div>

它有一个父母。

这基本上是我想要和拥有的，但它并不以响应为中心： 。 这就是它只有100％宽度的样子：

对Lion和其他人来说，解释整个代码：

<div class="parent">
<div class="page-header>
<h2>testest</h2>
</div>
</div>

.parent {
width:1000px;
}

.page-header {
width:100%;
background:red;
}

.h2 {
color: #ffffff;
text-align:center;
}

Answer 1

<强>已更新 请将您的代码替换为此

graceful_exit

不需要职位..

很抱歉，如果我没有明白你的观点，但如果你想让你的h2中心对齐，那么为什么不使用保证金..

看到这个

.page-header {
    background-color:#3c4547;
    width:100%;
    top:0px !important;
    margin-top:0px;
    display:block;
    padding:20px 0px 25px 0px;
    z-index:999;
    left:-385px;
}

.page-header h2 {
    color: @white;
    font-size:36px;
    font-weight:400;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

我假设你想让你的h2文本中心与响应性一致，所以我输入这样的代码..如果我错了，请纠正我。

进行测试

.page-header{width:100%;}
h2{margin-left:auto;margin-right:auto;width:auto;text-align:center;}
.section{ margin-left: auto;margin-right: auto;text-align: center; width: 100%;}

请检查我的例子，让我知道你的结构是不同的.. ty

截图

Answer 2

 ** try to use this code, i hope this code will help you :)**

div h2 {
    max-width: 1920px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

Answer 3

你们有一些很好的答案，但并没有真正解决我的问题 - 我相信你们中的一个可以解决另一个有类似问题的问题，但在我的情况下，我通过使用javascript来扩展id标签。

if(jQuery('.page-header').length > 0){
    pageHeader = jQuery('.page-header');
    jQuery('#main').prepend(pageHeader);
}