会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
Ghost.Chow
博客园
首页
新随笔
联系
管理
订阅
图片垂直居中的使用技巧
1.怿飞利用Hack解决方法
Code
.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
>
2.通过添加一无语义图片来解决图片居中问题,源自韩国Yahoo
Code
.itm{border:2px solid #ccc;width:160px;height:160px;text-align:center;}
.blank{width:0;height:160px;}
.itm img{vertical-align:middle;}
<
div
class
="itm"
>
<
img
src
="http://cn.yimg.com/i/comn/blank.gif"
class
="blank"
/>
<
a
href
=""
><
img
src
="http://cn.yimg.com/bookmark/yisou/mp3/m060616.jpg"
/></
a
>
</
div
>
无语义图片
posted @
2009-10-13 16:19
Ghost.Chow
阅读(
317
) 评论(
0
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部
公告