中心 header 在 parent 内

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>

它有一个 parents。

这基本上是我想要和拥有的，但它并不以响应为中心： . 这就是它只有 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

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

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

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

用于测试

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

请检查我的例子，让我知道你的结构不同.. 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);
}

中心 header 在 parent 内

Center header inside parent

html

css

margin