Question

我正在尝试创建一个网站，但我在定位标题时遇到问题。当我试图定位img时，它将按照我想要的方式定位，但是当我最小化浏览器时，它正在扩展布局并且位置正在改变。请帮忙。我不知道发生了什么。

以下是css上的代码

#main_header{
    /*background-image:url('./images/bgheader4.jpg');*/
    background-color: white;
    background-size: 100% 100% ;
    height: 660px;
    width: 100%; 
    position: relative;
}

 #main_header img {
    margin-left: 15%;

}

Answer 1

取走#main_header后面的#main_header img并为其提供一个类。否则它将继承main_header的所有属性，这可能不是你想要的。看一下这个fiddle，看看它是如何工作的（我刚刚使用了随机图像）。

Answer 2

我猜测你正在使用父<img>内的<div>，这使得它继承了它的属性。你可以这样做：

<html>
<head>
<style>
#main-header
{
height: 150px;
background-color: white;
text-align: center;
}
</style>
</head>
<body>
<div id = "main-header">
<img src = "stacoverflowlogo.jpg" alt = "stackoverflowlog" height = '100' width = '100'/>
<header>
Welcome to StackOverflow!
</header>
</div>
</body>
</html>

或者你应该从其父元素中取出<img>，然后单独给它id，例如：

<html>
<head>
<style>
#main-header
{
height: 150px;
background-color: white;
text-align: center;
}
#image
{ 
margin-left: 45%;
position: relative;
}
</style>
</head>
<body>
<img  id = "image" src = "stacoverflowlogo.jpg" alt = "stackoverflowlog" height = '100' width = '100'/>
<div id = "main-header">
<header>
Welcome to StackOverflow!
</header>
</div>
</body>
</html>

CSS LAYOUT POSITIONING定位我的标题徽标

2 个答案: