html - CSS 和 HTML 将 <h1> 居中放置在 <img> 旁边

Question

现在我有...

<header id="background-color">
    <img src="header_image.gif" alt="header">   
    <h1>Header</h1>
</header>

相关的 CSS 是...

header {
    background: #0072bc;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
#background-color {
    background: #0066CC;
    width: 100%;
}

这显然将图像置于 h1 之上。我想要做的是左对齐图像并使 h1 相对于整个页面(而不仅仅是剩余空间)居中。

当我说左对齐时，我的意思是相对于设置为 70% 且具有自动边距的主体和页眉。我不知道该怎么做，我是网页设计的新手。

谢谢。

Answer 1

您可以将 margin-right: -100%; 添加到图像中，这样标题文本就不会触及图像的右边缘。并将在标题中对齐中心。 check this fiddle