html - 如何将此滚动图像与页面中心对齐?

标签 html css

为什么鼠标悬停图像不会与页面中心对齐?
我已经尝试了所有我能想到的对齐方式,但都没有用。

<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>

See also my codepen.

希望对您有所帮助!

关于html - 如何将此滚动图像与页面中心对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47373635/

相关文章:

javascript - 抽象重复的 addEventListener ('click' ...函数以优化代码

python - XPath:如何根据紧邻其之前的同级元素的值来选择一个元素?

html - 如何在调整浏览器大小时堆叠多个图像时将顶部图像调整到中心

php - 实现 session 以保持用户登录,安全问题

html - 轨道 slider 中的中心文本和按钮元素?

css - span10 offset1 未居中

html - 如何在 Bootstrap 中改变 body 的边界半径

css - Bootstrap 3 面板页脚,1 个元素向左拉,2 个元素向右拉,都在同一页脚行上 - 怎么样?

javascript - Keyup 来操作 div

html - 跨度的 CSS 问题