我试图在固定的 height 和 width 内将图像垂直和水平居中对齐。我拥有的代码在 FF、Chrome、Safari 和 IE8+ 中运行良好,但在 IE7 中运行良好,我无法终生找到解决方法。
目前图像可以有不同的高度和宽度,但如果我找不到一个很好的解决方案,我想我可以更严格地控制高度并回退到久经考验的居中技术。
实例在 jsfiddle
大家有什么好主意吗?
最佳答案
因为 <img>
元素是 display: inline;
默认情况下,我们可以像发短信一样将它们居中:
a {
height: 180px;
width: 150px;
display: block;
text-align: center;
border: 1px solid black;
margin: 10px;
line-height: 180px;
}
a img {
vertical-align: middle;
}
关于css - IE7 垂直和水平图像居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8572916/