当前位置:首页 >> 站长天地 >> 网页制作 >> 内容

CSS技巧:图片垂直居中的使用技巧

时间:2010-8-21 15:54:00 栏目:网页制作 点击: 来源:不详

 [网页制作]-本文简要: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意,而是有其现实的原因,垂直居中是工作中最常遇到的一个问题,很有代表性。题目的难点在于两点:垂直居中; 图片是个置换元素,有些特殊的特性。 至于如何解决,下面是一个权衡的相对结...
D6电脑网 (d6pc.com): CSS技巧:图片垂直居中的使用技巧-网页制作

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

当然出题并不是随意,而是有其现实的原因,垂直居中是工作中最常遇到的一个问题,很有代表性。

题目的难点在于两点:

  1. 垂直居中;
  2. 图片是个置换元素,有些特殊的特性。

至于如何解决,下面是一个权衡的相对结构干净,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://pics.taobao.com/bao/album/promotion/
taoscars_180x95_071112_sr.jpg" />
</div>

当然还有其他的解决方法,在此不深究,有兴趣的可以阅读下:

《Vertical centering using CSS》
《Vertical centering using CSS》(标题和上同,内容不同)
《CSS List Grid Layout》

出处:蓝色理想




D6电脑网|电脑学习,电脑维修,电脑技术网;
设电脑学习,电脑入门,电脑技术,电脑教程,电脑维修,硬件知识,
网页设计建站,桌面壁纸,主题下载,WIN7下载,常用软件下载等栏目。感谢您的支持!
栏目:网页制作 作者:佚名 来源:不详
  • 上一篇:HTML 初学者指南(5)
  • 下一篇:HTML 5 预览(3)
  • 共有评论 0相关评论
    发表我的评论
    • 大名:
    • 内容:
    本类推荐
    • 没有
    本类固顶
    • 没有
    网友推荐
    链接申请
  • D6电脑网(www.d6pc.com) © 2018 版权所有 All Rights Reserved.
  • 本站为纯技术学习交流型网站,部分资源来源网络,仅供学习交流,版权归原作者,本站仅为转载,如有侵犯您的利益请联系我们删除.谢谢!
    关于D6电脑学习网 广告合作 419807867@QQ.COM 联系站长 网站地图 粤ICP备09035016号
  • 摆脱浅薄和低俗的最好办法就是学习,我们加油!D6PC! V3.0