前端开发之CSS图片水平、垂直居中显示
100人浏览 2024-12-16 10:04:22
做过前端开发的朋友都知道，要使文字在一个div容器垂直居中显示是很简单的事，但是如果是要让一张图片在div容器中垂直显示那就有点伤脑筋了，因为图片是个置换元素，有些特殊的特性，对于前端开发的大牛来说还好，解决方法有很多，比如什么利用js啊之类的，但是这些对于初学者来说就有些难度了，今天小编就把自己平时在项目中用的方法分享给大家，给大家一个参考。
其实小编用的方法也不是什么很高端的技术，算是最low的方法吧，但是很实用，能兼容各种浏览器，为了演示，小编直接从某宝商家店铺里拿了一张商品图来做演示，因为商品图都是高清无码的，且还很大，所以我们在CSS中把图片的高度设置为200px，div容器的高度为300px，完整的代码如下：
最终的运行效果如下图：
可以看到，这个图片在div中水平、垂直都是在正中间，是不是很完美。这个原理也很简单，就是在div容器中加了个 <i> 标签并把它的 display 属性设置为 inline-block（行内块元素），让它去撑开div容器的高度，再把图片的 vertical-align 属性设置为 middle 就可以垂直居中了，当然这只是个演示，大家在实际的项目中可以利用 max-width、min-width、max-height、min-height 等属性让图片根据需要自适应，以达到想要的效果。
相关推荐
-
PHP8种变量类型的详细讲解2025-02-22 00:32:24 -
php+apache 和 php+nginx的区别2025-02-22 00:21:27 -
PHP：与workerman结合实现定时任务2025-02-22 00:15:57 -
Nginx的Rewrite规则与实例2025-02-22 00:15:39 -
MySql中身份证字段的简单脱敏介绍2025-02-22 00:15:36