以CSS和HTML为中心<；h1>；在一个<；img>；

现在我有

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

这使图像明显位于h1上方。我想做的是使图像左对齐，并使h1相对于整个页面居中（而不仅仅是剩余空间）

当我说左对齐时，我指的是相对于主体和页眉的，设置为70%的自动边距。我不知道怎么做，我对网页设计一无所知

谢谢

header {
background-color: #0072bc;
width: 70%;
text-align: left;
padding: 10px;
}

看看JSFIDLE

---

您可以添加

右边距：-100%到图像，因此标题文本不会接触图像的右边缘。并将在标题中对齐中心
 快速回答。。可能需要微调

添加包装分区

<header id="background-color">
    <div id="container">
        <img src="Beach_Party.jpg" alt="header">   
        <h1>Header</h1>
    </div>
</header>


标题

尝试使用子元素的相对定位和绝对定位

<style>
    header {
        background: #0072bc;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    #background-color {
        background: #0066CC;
        width: 100%;
    }
    img {
        float:left;
        text-align:left;
        position: absolute;
        top:0;
        left:0;
    }
    h1 {
        z-index:10;
    }
    #container {
        position: relative;
    }
</style>


标题{
背景：公元前0072年；
宽度：70%；
左边距：自动；
右边距：自动；
文本对齐：居中；
}
#背景色{
背景#0066CC；
宽度：100%；
}
img{
浮动：左；
文本对齐：左对齐；
位置：绝对位置；
排名：0；
左：0；
}
h1{
z指数：10；
}
#容器{
位置：相对位置；
}

这对我很管用。。调整它以适应你的情况。。希望有帮助
 不，我不是，只是想把它们放在我的页面顶部，很明显，你可能需要自己的图像和代码，但它们在页面顶部对齐，彼此相邻。如果我没有正确理解这个问题，我很抱歉，谢谢你的回答。这是我正在寻找的，但我希望在整个页面的中心。如果你看，它不是相对于整个页面居中，而是居中于图像和页面其余部分之间的剩余空间。你的意思是图像和页眉应该并排放置，图像应该位于页眉的左侧，页眉应该位于页面的中心吗？试试这个@I_Debug_将它们放在一起的所有东西，但是图像比标题大。它超出了我头球的蓝色区域。有没有办法使蓝色区域更高？@I_Debug_一切它也没有将相对页面居中，而是根据图像后的剩余空间居中。谢谢，感谢您的帮助。
<style>
    header {
        background: #0072bc;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    #background-color {
        background: #0066CC;
        width: 100%;
    }
    img {
        float:left;
        text-align:left;
        position: absolute;
        top:0;
        left:0;
    }
    h1 {
        z-index:10;
    }
    #container {
        position: relative;
    }
</style>