已登录 首页 | 产品报价 全国行情 产品排行榜 | 渠道商情 商铺大全 | 新闻 评测 专题 下载 | 培训 视频 高端访谈 | 产品论坛 MY168 圈子 装备
IT168.com
当前位置:IT168首页 > 学院 > 网页制作:用CSS实现图片垂直居中!
[收藏此页] [打印] [推荐] [评论]

网页制作:用CSS实现图片垂直居中!

责任编辑:杜涛作者:网络 佚名   2008-05-28   

    【IT168 论坛采风】曾经在某个招聘中看到这样一道题目:“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意,而是有其现实的原因,垂直居中是工作中最常遇到的一个问题,很有代表性。

相关精彩文章

  题目的难点在于两点:垂直居中; 图片是个置换元素,有些特殊的特性。至于如何解决,下面是一个权衡的相对结构干净的简单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 #eee;
}
.box img {
 /*设置图片垂直居中*/
 vertical-align:middle;
}

<div class="box">
<img src="http://publish.it168.com/2008/0527/images/1021354.jpg" />
</div>

更多热点:Photoshop教程 ASP入门教程 视频教程 图片教程 开发速查手册

上一页
1
2下一页
收藏到: 添加到“百度搜藏”添加到“QQ书签”添加到“Google书签”添加到“Yahoo收藏”添加到“和讯网摘”
史上最详细DELL网购天书 优惠信息请致电800-858-2903
本文欢迎转载,转载请注明:转载自IT168 [ http://www.it168.com/ ]
本文链接:http://publish.it168.com/2008/0528/20080528000901.shtml
产品对比
网页制作推荐
最热 最新 最新降价
Adobe网页制作促销信息
沈阳雷安泰德
adobe辽宁省银牌经销商
联系电话:024-62125069 13478186039
友情推介