淘宝的一个前端面试题：使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。

想起了vertical-align:middle;但是不行，后来才知道还要display:table-cell;才可以，但是display:table-cell;这个在IE是没有用的，于是就想用line-height来解决，无果。

答案如下：

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="Keywords" content="简单的XHTML页面" />

<meta name="Description" content="这是一个简单的XHTML页面" />

<title>简单的XHTML页面</title>

<style type="text/css">

.box {display: table-cell; vertical-align:middle; width:200px; height:200px; text-align:center;/* hack for ie */ *display: block; *font-size: 175px;/* end */border: 5px solid red;}

.box img {vertical-align:middle;}

</style>

< /head>

<body>

<div class="box">

<img src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/tb_m.PNG"  alt="" />

</div>

</body>

</html>

测试效果：

CSS Code

.boxs {display:table-cell; vertical-align:middle; width:200px; height:200px; text-align:center;

/* hack for ie */*display: block; *font-size: 175px;/* end */border: 5px solid red; }

.boxs img { vertical-align:middle; }

淘宝招聘官评语：这个解法用到了css hack。我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。根据我们的计算，高度/字体大小的比值为1.14左右时IE可实现垂直居中。 当然还有很多其他的实现方案，但需要引入额外的标签。对于流量超大的淘宝网而言，我们经过权衡，倾向于在此问题上合理的使用hack。

使图片水平并垂直居中的一个Hack的更多相关文章

  1. DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 1.水平居中: 1)box设置  text-align:center ;    text-alig ...

  2. DIV或者DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...

  3. css 使图片水平垂直居中

    1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...

  4. css设置图片水平及垂直居中

    .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:cen ...

  5. js脚本控制图片水平与垂直居中

    使用方法: 1.定义ResizeImg(obj)方法 function ResizeImg(obj) { var boxHeight = $(".box").height(); v ...

  6. css 水平、垂直居中

    水平居中 行内元素 行内元素:(img.span.文字等行内元素),通过在父级元素设置 text-align:center 使元素水平居中. 块级元素 块级元素:(div.p.h1...h6.ul.l ...

  7. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  8. 使当前对象相对于上层DIV 水平、垂直居中定位

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  9. Android开发点滴 - 如何使按钮水平垂直居中且始终占据屏幕宽度一半

    问题描述: 如何使按钮水平垂直居中且始终占据屏幕宽度一半 效果如下: 竖屏: 横屏: 解决方案: 使用线性布局,指定线性布局的总权重(weightSum)为1, 指定按钮的权重为其一半即0.5 布局代 ...

随机推荐

  1. 001----Mysql隔离级别

    一:事务隔离级别 mysql数据库的隔离界别如下: 1, READ UNCOMMITTED(未提交读) 事务中的修改,即使没有提交,对其它事务也是可见的.  这样会造成脏读(Dirty Read)的问 ...

  2. 爬虫2.4-scrapy框架-图片分类下载

    目录 scrapy框架-图片下载 1 传统下载方法: 2 scrapy框架的下载方法 3 分类下载完整代码 scrapy框架-图片下载 python小知识: map函数:将一个可迭代对象的每个值,依次 ...

  3. Python3 函数作用域

    一 LEGB 什么是LEGB? L:local 函数内部作用域 E:enclosing 函数内部与内嵌函数之间 G:global 全局作用域 B:build-in 内置作用域 顺序是什么? 跟名字一样 ...

  4. 王者荣耀交流协会final发布WBS+PSP

    WBS: PSP: 时间为估计,大致精确. 类型 personal software process stages 预估时间 实际花费时间 planning 计划 4h 4h estimate 4h ...

  5. 冲刺ing-5

    第五次Scrum冲刺 队员完成的任务 队员 完成任务 吴伟华 Leangoo的看板截图,燃尽图 蔺皓雯 编写博客 蔡晨旸 测试 曾茜 测试 鲁婧楠 测试 杨池宇 测试 成员遇到的问题 队员 问题 吴伟 ...

  6. Improving the Safety, Scalability, and Efficiency of Network Function State Transfers

    Improving the Safety, Scalability, and Efficiency of Network Function State Transfers 来源:ACM SIGCOMM ...

  7. IO流详解

    目录 IO流 IO流概述及其分类 IO概念 流按流向分为两种: 流按操作类型分为两种: 常用的IO流类 字节流的抽象父类: 字符流的抽象父类: InputStream & FileInputS ...

  8. Swift-setValuesForKeysWithDictionary

    重写 setValuesForKeysWithDictionary 那么字典中可以有的字段在类中没有对应属性 class Person : NSObject { var age :Int = // 重 ...

  9. 转 从红帽、GitHub和Docker看开源商业模式的进阶

    从红帽.GitHub和Docker看开源商业模式的进阶 发表于2014-12-16 10:26| 7594次阅读| 来源http://stratechery.com/| 0 条评论| 作者Ben Th ...

  10. TFTP服务 简单文件传输协议)是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议，默认端口号为69

    (1)yum安装:tftp.tftp-server   (2)启动tftp CentOS 6 service xinetd restart chkconfig tftp on CentOS 7 sys ...