html - 为什么我的文字不能对齐到图像的中心？

Question

我正在尝试将页面中间的页眉文本与图像对齐。图片居中对齐，但文本位于页面左侧。

我试图复制 this解决方案，但我显然没有做正确的事情。任何帮助将非常感激。 HTML:

    <header>
        <div class="tag">
            <h1>Some text here</h1>
            <h3>And more text here</h3>
        </div>
        <img src="http://www.placehold.it/900x300">
    </header>

CSS:

    header {
      height: 200px;
      line-height: 50px;
      text-align: center;
      background: #303e49;
      position: relative;
    }

    .tag {
         text-align: center;
         background: #303e49;
         position: absolute;

    }

Answer 1

1st 你不应该标记 jquery 因为它的 css

2nd 将 left 0 和 right 0 添加到绝对元素以获得包含 div 的完整宽度

.tag {
         text-align: center;
         background: #303e49;
         position: absolute;
         left: 0;
         right: 0;
         z-index : 1;
    }