0

现在我有...

<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% 并带有自动边距的正文和标题。我不知道该怎么做，我对网页设计完全陌生。

谢谢。

4

3 回答 3

2

您可以添加margin-right: -100%;到图像，因此标题文本不会触及图像的右边缘。并将在标题中对齐中心。检查这个小提琴

于 2013-04-03T07:20:00.290 回答
0 
header {
background-color: #0072bc;
width: 70%;
text-align: left;
padding: 10px;
}

看看jsfiddle

http://jsfiddle.net/EScBs/

于 2013-04-03T06:58:44.563 回答
0

一个快速的答案..可能需要微调...

添加包装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>

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

于 2013-04-03T07:22:19.027 回答