一起学编程
www.zftb.cn
常用技术,开发中遇到的坑,你想要的或许这里有。
共收藏了990 篇技术文章
搜索
Toggle navigation
首页
SpringCloud
编程设计
CSS
Hadoop
Ajax
Javascript
Java
Jetty
Python
Storm
ElasticSearch
SpringBoot
Sublime
SpringCloud
ZooKeeper
Git
Maven
Gradle
数据库
redis
SQL Server
Memcache
MySql
Oracle
MangoDB
Hbase
Access
DB2
电脑知识
(current)
网络知识
windows10
linux
常用工具
×
搜索提示
关键字不能小于2个字!
当前位置:
首页
>
编程设计
>
CSS
>
纯CSS实现未知尺寸图片垂直居中
http://www.zftb.cn
发布时间:2015-08-29 10:46 来源:一起学编程网 浏览:
加载中
次
文章目录
淘宝UED前端招聘中有这样一道题目:使用纯CSS实现未知尺寸的图片(但宽高都小于200px)在200px的正方形容器中水平和垂直居中。
下面是一个权衡的相对结构干净、CSS简单的解决方法:
.cssbox{
/* 非IE内核浏览器识别垂直居中 */
display:table-cell;
vertical-align:middle;
/* IE内核浏览器识别垂直居中 */
*display:block;
/* 约为高度的0.873,200*0.873 约为175 */
*font-size:175px;
text-align:center;
width:200px;
height:200px;
}
.cssbox img{
vertical-align:middle;
}
上一篇:
HTML特殊符号对照表
下一篇:
CSS控制ul缩进间距和去掉li点的方法
如果你有好的
win10资讯
或者
win10教程
,以及
win10
相关的问题想要获得
win10系统下载
的关注与报道。
欢迎加入发送邮件到657025171#qq.com(#替换为@)。期待你的好消息!
CSS隐藏页面元素的五种方法
08.17
CSS如何把DIV永远置于页面的底部
08.17
纯 CSS 创建各种不同的图形形状
04.28
12款很棒的浏览器兼容性测试工具
04.28
CSS清除浮动常用方法小结
01.11
CSS自定义滚动条样式
08.29
如何用CSS制作广告投影,CSS实例
08.29
ie下双倍margin的处理方法
08.29
overflow解决float浮动后高度自适应
08.29
让IE6完美支持PNG图片透明的方法详
08.29
CSS边距属性定义:用margin还是pa
08.29
CSS为网站图片添加防盗链功能
08.29
CSS实现垂直三栏自适应等高布局
08.29
CSS布局口诀
08.29
写出高效CSS的十条定律
08.29
css html 鼠标手型,鼠标形状,鼠标效
08.29
CSS:HTML5语义化标记抛弃DIV标记
08.29
布局浏览器兼容的问题以及解决方
08.29
正确的粒度是减小CSS的关键之一
08.29
提高CSS的网页渲染效率11点注意项
08.29
最新文章>>>
CSS隐藏页面元素的五种方法
08.17
CSS如何把DIV永远置于页面的底部
08.17
纯 CSS 创建各种不同的图形形状
04.28
12款很棒的浏览器兼容性测试工具
04.28
CSS清除浮动常用方法小结
01.11
CSS自定义滚动条样式
08.29
如何用CSS制作广告投影,CSS实例:Google Adsense代码广告投影效果
08.29
ie下双倍margin的处理方法
08.29
overflow解决float浮动后高度自适应的问题
08.29
让IE6完美支持PNG图片透明的方法详解
08.29
相关热门>>>
CSS清除浮动常用方法小结
69
12款很棒的浏览器兼容性测试工具
66
css html 鼠标手型,鼠标形状,鼠标效
49
CSS边距属性定义:用margin还是pa
48
overflow解决float浮动后高度自适应
46
纯 CSS 创建各种不同的图形形状
41
如何用CSS制作广告投影,CSS实例
38
CSS为网站图片添加防盗链功能
37
ie下双倍margin的处理方法
37
CSS自定义滚动条样式
34
A-
A+