纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法
在曾经的"淘宝UED招聘"中有这样一道题目:
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。
题目的难点在于两点:
垂直居中;
图片是个置换元素,有些特殊的特性。
至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:
.box {
display: table-cell;
vertical-align:middle;
text-align:center;
*display: block;
*font-size: 175px;
*font-family:Arial;
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.背景法
<style type="text/css">
* {margin:0;padding:0;}
div {
width:500px;border:1px solid #f00;
height:500px;
background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
}
</style>
<div>
</div>
背景法简单但不利于动态导入的图片
3.背景法
.qq {
width:500px;
display:table-cell;
height:400px;
text-align:center;
vertical-align:middle;
border: 1px solid #000
}
i {
display:inline-block;
height:100%;
vertical-align:middle
}
.qq img {
vertical-align:middle;
}
</style>
<div class="qq"><i></i><img src="http://www.baidu.com/img/baidu_logo.gif" /></div>
这种方法也很简单,但需要加一个<i>的额外标签
如果页面需要一两个居中的图片,那此方法是可推荐,但如果很多个产品的图,那加的标签数量就比较多
其他解决方法,有兴趣的朋友可以戳:http://bbs.blueidea.com/thread-2666987-1-9.html
div{
height: 400px;
line-height: 400px;
overflow: hidden;
}
此方法也只适用于单行的文字或者图片+文字,通常用于前面带有小图标的链接或标题等。
转载于:https://www.cnblogs.com/moneyss/p/6961340.html
纯css实现div中未知尺寸图片的垂直居中相关推荐
- css实现div中的input和span垂直居中显示
给div添加 display:flex;justify-content:center;align-items:center; 的样式即可 <div id="dv_top" s ...
- html代码字号div style=,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇 在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
- div怎么在css中设置字体大小,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇 在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
- 纯css在div上添加小三角
纯css在div上添加小三角 有些项目中会遇到这样的需求,就是div容器上要突出来一个小三角,如下图 虽然在功能上没啥意义,但是人家UI就是要这个小三角,你能怎么办,咱必须给他整出来! 我们用伪类和b ...
- 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题
纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题 参考文章: (1)纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题 (2)https://www.cnblogs.co ...
- 纯css实现div同行显示
纯css实现div同行,效果如下(由有10余年前台工作经验的工程师指导): 代码如下(可以直接用): <html> <head> <style type="te ...
- 学习使用CSS实现div中的内容垂直居中的方法
学习使用CSS实现div中的内容垂直居中的方法 一.行高(line-height)法 二.内边距(padding)法 三.模拟表格法 四.CSS3的transform来实现 五:css3的box方法实 ...
- 纯css实现视频容器动态尺寸并且固定长宽比
1. 使用场景 PC端播放视频容器一般要求是16:9,同时支持多路视频同时播放,可选多种窗格22 .33 .1*1等等...就是要实现宽度变化,高度跟着变化,并且保证长宽比为16:9,或者其他比例,看 ...
- div中文字,图片居中对齐,兼容FF、IE
2010年07月21日 星期三 20:11 垂直居中对table来说是小菜一碟,只需指定单元格为vertical-align: middle即可,但这在css布局中不管用.假设你将一个导航菜单的高度设 ...
最新文章
- 你还在 Java 代码中写 set/get 方法?赶快试试这款插件吧!
- android6 运行,Xbox串流开放测试,只需安卓6即可运行
- 收藏 | 最全中科大计算机学院课程资源(含答案)
- 理解 ajax、fetch和axios
- 未将对象引用设置到对象的实例--可能出现的问题总结
- 电感和磁珠的区别及应用场合和作用
- Java说明注释(Doc注释)
- 程序员的数学全三册密码_阿波罗50年前成功登月,少不了这位硬核女程序员
- 微盟数据库的涅槃之旅
- volatile修饰变量
- WordPress中使用mod_rewrite设置漂亮链结
- matlab软件moran值,用matlab求moran并作图的具体步骤
- mongodb及其索引的使用例子
- 如何在Linux上使用端口敲门(以及为什么不应该这样做)
- python产品发布会_【Mac系统 + Python + Django】之开发一个发布会系统【Django模型(三)】...
- 【leetcode刷题笔记】Sqrt(x)
- Dijkstra求最短路径例题
- covariance matrix r语言_R语言 第2章 数据对象与数据读写(3)
- 多线程之阻塞队列ArrayBlockingQueue,BlockingQueue
- 各版本的QT源码下载地址
热门文章
- css制作俄罗斯方块,H5原创俄罗斯方块(基于canvas)
- h2 mysql mode_H2 数据库快速入门
- java生成8位邀请码,邀请码生成器Java代码
- pe我的手机服务器存档文件,我的世界手机版怎么导出存档 pe版怎么把存档给别人用...
- junit不启用事务_JUnit禁用启用测试
- Python中的numpy.zeros()
- python 命令行 参数_Python命令行参数
- Qt5Widgetsd.lib(Qt5Widgetsd.dll) : fatalerror LNK1112: 模块计算机类型“x64”与目标计算机类型“X86”冲突
- 智能指针 enable_shared_from_this 陷阱
- 敬业签电脑手机云同步便签及安卓手机和苹果手机云同步桌面便签