Question

我希望我的图片（near-logo.png）位于标题div中的标题内容div中。此刻的图像位于左侧，但它必须位于header-content div的左侧。 header div是100％宽度，header-content div是946px宽度。

<!DOCTYPE html>
<html>
    <head>
        <title>Webpage</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
        <div id="header">
            <div class="header_content">
                <img src="img/near-logo.png"/>
            </div>
        </div>
    </body>
</html>

body {
    margin:0;
    padding:0;
}
#header {
    background-color:#353C3E;
    height:80px;
    width:100%;
    position:relative;
}

.header-content {
    width:946px;
    position:absolute;
    margin:0 auto;
}

Answer 1

我看到两个问题：

首先，你的CSS中有一个错误，你的div中的班级是<div class="header_content">，但在你的CSS中.header-content。

如果您希望标题内容居中，请删除position: absolute属性。

Answer 2

图片与div header_content左侧对齐。问题是，html中的div类名称为header_content，您在css中使用的名称为header-content。

另一件事是您已使用position:absolute header_content，因此margin:0 auto不会被应用，因此请移除absolute位置。使用以下代码

.header_content {
    width:946px;
    position:absolute; // Remove this line
    margin:0 auto;
}

Answer 3

添加

.header_content {
    position:absolute;
    left: 0; top: 0;
}

图像不在正确的位置[HTML / CSS]

3 个答案: