图片在容器中垂直居中,有几种方式:
1、放在table里 (最简单直接的方法)
<table style="height:200px;border:1px solid #000;"> <tr> <td> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> </td> </tr> </table>
2、加一个0宽度、100%高度的图片。并且两张图都设为:vertical-align:middle
<div style="height:200px;border:1px solid #000;"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" style="vertical-align:middle;"/> <img src="" style="height:100%;width:0px;vertical-align:middle;"/><!-- 这里加一个0宽度、100%高度的图片 --> </div>
3、单个图片水平垂直居中 一淘使用方案
<style type="text/css"> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ /* *font-family:Arial;防止非utf-8引起的hack失效问题,如gbk编码*/ width:200px; height:200px; border: 1px solid #000; } .box img { /*设置图片垂直居中*/ vertical-align:middle; } </style> <div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> </div>
4、在图片和容器高度,都是已知的情况下,计算margin-top (不推荐)
下图是容器高度200px,如片高度95px
<div style="height:200px;border:1px solid #000;"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" style="margin-top:52.5px;"/> </div>
时间: 2024-10-10 14:48:29