为什么鼠标悬停图像不会与页面中心对齐?
我已经尝试了所有我能想到的对齐方式,但都没有用。
<img src="IMG1" align="middle"
onmouseover="this.src='IMG2'"
onmouseout="this.src='IMG1'" width="1008" height="175"/>
我无法让它在页面中间水平居中。
最佳答案
您可能希望将图像包装在 <div>
中设置为显示 flex(我不会将 <body>
设置为 flex)。
Flex box 可让您将图像放在 <div>
的中间很快!如果你想让你的容器占据屏幕全高,只需设置你的 <div>
包装到 100vh。
另请注意,您不应将尺码放在正斜杠之后。
<div class="container">
<img src="img1" onmouseover="this.src='img2'" onmouseout="this.src='img1'"/>
</div>
.container {
display: flex;
justify-content: center;
align-items:center;
height: 100vh;
}
img {
height: 200px;
}
<div class="container">
<img src="/image/dusjG.png"
onmouseover="this.src='/image/0RSNI.jpg'"
onmouseout="this.src='/image/dusjG.png'"/>
</div>
希望对您有所帮助!
关于html - 如何将此滚动图像与页面中心对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47373635/