关闭

CSS实现图片垂直居中

163人阅读 评论(0) 收藏 举报
分类:
难点在于两点:
  1.垂直居中;

  2.图片是个置换元素,有些特殊的特性。


CSS简单的解决方法:


.box {
  width:200px;
  height:200px;
  border: 1px solid #eee;
  
 /*非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编码*/
}

.box img {
 /*设置图片垂直居中*/
 vertical-align:middle;
}

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:39456次
    • 积分:611
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:35篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论