html - 垂直对齐的居中图像

标签 html css image vertical-alignment

对我来说,图像不会以垂直对齐方式居中,但看起来应该如此。我只在怪癖模式下为 IE7 编码(不幸的是)。我的代码如下。任何人都知道为什么这不会垂直对齐

<html>
<head>
</head>
<body>
<div style="height:500px; width 500px; line-height:500px; background-color:Green; vertical-align:middle;">
   <img src="./images/load.gif" style="vertical-align:middle;"/>
</div>
</body>
</html>

最佳答案

如果您想在 div 中垂直对齐您的图像,您应该执行以下操作:

div {
    position:relative;
    height:500px;
    width:500px;
}

div img {
    position:absolute;
    top:50%;
    margin-top:-XXXpx; /* where XXX is half the height of the image */
}

关于html - 垂直对齐的居中图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12186142/

相关文章:

html - CSS 使用媒体查询更改位置

php - 无法将数据从表单发送到mysql

jquery - 带滚动条显示/隐藏 div

javascript - 如何使 DIV 元素默认关闭?

r - 将图像插入gt表

image - plt.imshow 在 IPython 中显示灰度图像的彩色图像

html - 如何使父元素扩展到其子元素的宽度?

html - 带有 h1 覆盖的响应式缩略图上的溢出中断

asp.net - 如何在不设置具体宽度的情况下设置水平菜单居中

javascript - 如何使用 javascript 或 jQuery 预加载具有多个 srcset 的图像?