如何让未知宽高的图片在已知宽高的父元素中垂直居中？

来源：互联网发布：pmp认证知乎编辑：程序博客网时间：2024/05/28 04:52

如何让图片在父级元素中居中这个问题，在前端开发过程中多少都会遇到，从网上搜到过很多种解决办法，但实际应用时并没有很好的解决。不过结合网上的办法与我个人的实践，我找到了一个解决办法，给大家分享下。如果有这个办法还有不完善的地方，也请大家指出来。

问题：图片的宽高未知，其父级元素的宽高已知，如何让图片在父级元素中垂直居中？

代码如下：

<!doctype html><html><head><meta charset="utf-8"></meta><title>测试</title><style type="text/css">.parent{width:800px;height:800px;border:1px solid #ccc;line-height:800px;display:inline-block;}.parent img{vertical-align:middle;}</style></head><span class="parent"><img src="1.jpg" alt=""/></span></html>

显示结果：

总结：给父元素设定与高度相等的行高，图片设置vertical-align:middle

0 0