我有以下 html 代码:
<div style="border: 3px coral solid;width:400px;height:400px;background:#D4D0C8;">
<img style="max-width:400px;max-height:400px;" src="myImage.jpg">
</div>
使用这些样式,宽度大于 400 像素的图像会调整大小但仍保留在 div 的顶部。有没有办法让它们垂直居中?
最佳答案
CSS:
div {
border: 3px solid coral;
width: 400px;
height: 400px;
background: #d4d0c8;
line-height: 400px;
text-align: center;
}
img {
max-width:400px;
max-height:400px;
vertical-align: middle;
}
参见 demo fiddle .
关于html - 使用 max-height 和 max-width 垂直居中图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6635374/