网页设计的新手,所以这可能是编写得非常糟糕的代码。这可能是非常明显的事情,但无论我在徽标的CSS中发生什么变化,我都无法让它移动?我需要将徽标向下移动。
.header {
padding: 10px 16px;
background-color: darkred;
box-shadow: 0px 10px 20px black;
font-family: arial;
position: relative;
height: 90px;
}
.logo {
position: absolute;
float: left;
margin-top: 50px;
}
<div class="header" id="myHeader">
<div class="logo">
<img src="https://via.placeholder.com/300x90" width=300 height=90>
</div>
</div>
如果你试图在网站的某个地方移动徽标,我认为你不应该使用浮动,它会附加到你指定它们的某个位置,因此你不能自由地移动你的div。你必须使用top
,left
,right
,bottom
。同时它将取代margin-top
为您服务。你还应该包含background-repeat: no-repeat
,background-size: contain
。因此,如果向下滚动,您的徽标将不会重复。最后,你应该设置margin:0 auto,因为如果你有的话,它们不会粘到其他div。
.logo {
position: absolute;
top: 12px; //For example
background-repeat: no-repeat;
background-size: contain;
margin: 0 auto;
}