<div>
容器收缩到,#34;零&#34;定位我的徽标后。
您能否查看问题所在?我希望它以#logo <div>
为中心。我认为让父母<div>
relative
和孩子absolute
应该在<div>
中保留徽标。
HTML
<body>
<div class="wrapper">
<header>
<div id="logo">
<img src="./img/logo.png">
</div>
</header>
</div>
</body>
CSS
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding:0;
margin:0;
background-color: #DCB894;
}
.wrapper{
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
}
header {
margin-top: 10px;
background-color: #BCD34C;
}
#logo{
border-style: solid;
border-color: magenta;
border-width: 2px;
position: relative;
height: auto;
}
#logo img {
width: 150px;
height: auto;
position: absolute;
margin: auto;
border-style: solid;
border-color: red;
border-width: 2px;
}
答案 0 :(得分:0)
我会避免位置绝对,如果你将图像包裹在div中,你可以使图像居中。
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding:0;
margin:0;
background-color: #DCB894;
}
.wrapper{
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
}
header {
margin-top: 10px;
background-color: #BCD34C;
}
#logo{
border-style: solid;
border-color: magenta;
border-width: 2px;
position: relative;
height: auto;
max-width: 220px;
overflow: hidden;
}
#logo figure {
width:52%;
margin: 0 auto;
}
#logo img {
width: 100%;
position:relative;
border-style: solid;
border-color: red;
border-width: 2px;
overflow: hidden
}
&#13;
<body>
<div class="wrapper">
<header>
<div id="logo">
<figure>
<img src="https://upload.wikimedia.org/wikipedia/en/9/9d/Pepsilogo.png">
</figure>
</div>
</header>
</div>
</body>
&#13;
img
将占用figure
给予的总空间的100%。
您可以更改figure
的宽度,然后图像将响应,使其保持居中。
答案 1 :(得分:0)
是的,它应该表现得像那样,因为position: absolute
和position: fixed
不会从它的父母或容器中发生。当您使用这两个css属性时,它们会转到常规文档之外。这就是为什么父母对待内部没有内容和高度不会自动增加,直到通过css属性显式设置高度,例如height: 100px
或min-height: 100px
(例如)。
根据您当前的结构,您可以设置基于最小高度的徽标。
header {
min-height: 100px; // 100px here logo size assumed
}
或保持徽标图像的位置相对:
#logo img {
position: relative;
}