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

Answer 2

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

看看jsfiddle

http://jsfiddle.net/EScBs/

Answer 3

快速回答..可能需要微调......

添加包装div ...

<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>

它对我有用..调整它以适合您的情况..希望它有所帮助！

CSS和HTML以<img/> </h1>旁边的<h1>为中心

3 个答案: