关于图片垂直居中的方法
关于图片垂直居中的方法
效果图如下:
第一种:
主要利用 display:table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
兼容ie8及以上的浏览器
HTML代码
<div class="divCon img_wrap"> <p><img src="../TIM截图20180504094302.png" /></p> </div>
css代码
.divCon{ width: 400px; height: 300px; border: 1px dashed #ccc; display: table-cell; vertical-align: middle; text-align: center; } .divCon img{ width: 50px; height: 50px; }
第二种:背景图法
兼容ie6以上的浏览器
HTML代码
<div class="divCon img_wrap"> </div>
css代码
.img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; background: url(TIM截图20180504094302.png) no-repeat center center; }
第三种:利用p标签的line-height与text-align: center;
兼容ie8及以上的浏览器
HTML代码
<div class="divCon img_wrap"> <p><img src="TIM截图20180504094302.png" /></p> </div>
css代码
*{margin: 0px;padding: 0px} .img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; text-align: center; margin: 200px auto } .img_wrap p{ width:400px; height:300px; line-height:300px; /*行高等于高度 */ } .img_wrap p img{ vertical-align:middle; border:1px solid #ccc; }
原文章出处:https://www.cnblogs.com/sese/p/5941389.html