为什么我的文字不会在图像中心对齐？

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

1，你不应该标记jquery导致其css

第二个将0和0添加到绝对元素以获得包含div的全宽

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