Question

我已经使用了搜索功能，它不会center，因为我无法理解一些建议和那些我无法工作的建议。谷歌也没有留下任何结果。

我想使用1 div作为“背景”，以便屏幕下方的第一个150px为蓝色。

然后我希望徽标位于centered框950px宽150px下。

'logo div'（我称之为headercontent）需要在headerbackgroundblue div的“顶部”，我已经管理过了。

然而，它不会将该框置于该div的中心（950px广泛居中将存储所有内容，以便它在所有屏幕上看起来都很好，但是蓝色为1920px宽以使网站看起来更好更大的决议。

CSS

body {
    padding: 0;
    margin: 0;
}
.headercontent {
    z-index: 2;
    position: absolute;
    height: 150px;
    width: 950px;
    margin-right: auto;
    margin-left: auto;
}
.bluebackgroundtop {
    height: 150px;
    width: 1920px;
    margin-right: auto;
    margin-left: auto;
    background-color: #3c56a6;
    z-index: 1;
    position: absolute;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Kleenzone - Commercial Cleaning Services</title>
        <link href="style/style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <div class="bluebackgroundtop"></div>
        <div class="headercontent">
             <H1> KLEENZONE </H1>
        </div>
    </body>
</html>

Answer 1

您需要在.headerContent div中包含.bluebackgroundtop，然后按照以下方式设置：

* {
    padding: 0;
    margin: 0;
}
.headercontent {
    height: 150px;
    width: 950px;
    margin:0 auto;
    text-align:center; 
}
.bluebackgroundtop {
    height: 150px;
    width: 1920px;
    margin:0 auto;
    background-color: #3c56a6;
}

<强> DEMO

不能将div放在另一个div中

1 个答案: