位置：广州松河 > 技术支持 > CSS 图片水平垂直全部居中（图片尺寸小于块级父元素）_CSS学习

CSS 图片水平垂直全部居中（图片尺寸小于块级父元素）_CSS学习

来源：网络整理时间：2023/3/4 1:03:42 共 3627 浏览

相关如上图：《【图片居中】图片在固定框架内上下左右水平全部居中》【推荐】

下方是今今天要分享的图片水平垂直居中方式：

注意：本文分享的是限定图片大小的，也就是图片的宽高都在父元素尺寸之内！

<style>
 *{padding: 0;}
 ul{list-style: none;}
 li{border: 1px solid #ededed;margin-right: 4px;}
 
.zxx_ul_image{overflow:hidden; zoom:1;}
.zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}
.zxx_ul_image li:after{content:' '; vertical-align:middle;}
.zxx_ul_image li img{vertical-align:middle;}
</style>
<ul class="zxx_ul_image">
    <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></li>
    <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" /></li>
    <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" /></li>
    <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" /></li>
    <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" /></li>
    <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm6.jpg" /></li>  
</ul>

图片居中方法多种多样，本文介绍的方法可以酌情考虑，但总体感觉不如相关推荐的案例！

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：zblogPHP模板中常见的分享代码(依赖jquery)(分享到微信、qq、微博、qq空间、豆瓣等等功能)_前端技术 | ·下一条：padding和margin负值实现 - 等高布局，侧边栏等高布局方法_CSS学习