Created
November 10, 2012 03:15
-
-
Save shenmao1989/4049697 to your computer and use it in GitHub Desktop.
图片垂直居中的使用技巧
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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 #eee; | |
} | |
.box img { | |
/*设置图片垂直居中*/ | |
vertical-align:middle; | |
} | |
<div class="box"> | |
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment