div图片垂直居中 如何使div中图片垂直居中
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03)
『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用。』
点评:关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧,烦人的是没有具体或者相当详细的解决方法,希望本文所整理的知识点可以帮助到你
div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法:
在曾经的 淘宝UED 招聘 中有这样一道题目:
“使用纯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>
最新文章
- JS事件的三种方式
- 初识Angular
- 更新Mac OSX XCode后Git 不能使用提示Can&#39;t start Git: /usr/bin/git
- ion-scroll 滚动框
- 最近Google经常打不开?
- HDFS 文件读写过程
- linux 学习-用户&;群组&;权限
- FTP服务器搭建及操作(一)
- Android 任何位置的可移动悬浮窗
- windows搭建web服务器
- SpringBoot开发案例之多任务并行+线程池处理
- scala的多种集合的使用(5)之数组Array(ArrayBuffer)的操作
- 服务器代理+jQuery.ajax实现图片瀑布流
- vue.js学习系列-第二篇
- [JLOI2016/SHOI2016]侦察守卫(树形dp)
- CF 494B 【Obsessive String】
- Go 接口(interface)
- c#: Label控件加入AutoHeight属性
- 在向一个ArrayList中添加大量元素前,可以使用ensureCapacity方法来增加ArrayList的容量
- quine