淘宝的一个前端面试题：使用纯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. oracle的分号和斜杠/

    ;是执行语句必须的/是执行语句块必须的 比如执行一个触发器 CREATE OR REPLACE TRIGGER "TRG_1" BEFORE INSERT ON "CAT ...

  2. Redis的数据类型以及每种数据类型的使用场景

    人就是很奇怪的动物,很简单的问题往往大家都容易忽略,当我们在使用分布式缓存Redis的时候,一个最简单的问题Redis的数据类型以及每种数据类型的使用场景是什么? 是不是觉得这个问题很基础?我也这么觉 ...

  3. vim—多行注释、取消多行注释

    多行注释 命令模式: (1)将光标放在要注释的行首,按下组合键ctrl + v ,然后按上下键选取要注释的行. (2)按下大i键,然后插入要注释的符号 # (3)按ESC键,退出后,就会全部注释. 取 ...

  4. 亚马逊中国耳机巨头Jabra官方旗舰店上线

    日前,亚马逊中国(Z.cn)宣布,全球无线技术顶级领导品牌 Jabra (捷波朗)官方旗舰店正式上线,产品品类涵盖蓝牙耳机.音乐耳机.无线音箱和车载系列产品.Jabra 旗舰店上线伊始便汇集了 60 ...

  5. 微信小程序-----自定义验证码实现

    这一段时间做小程序项目,使用的是mpvue的框架,需要自己实现验证码输入,模拟input的光标,上一个框输入后后一个框自动获取焦点,删除时从后往前依次删除.下图是整体效果: <template& ...

  6. loadrunner socket协议问题归纳（0）

    一.概述         Loadrunner拥有极为丰富的工具箱,供予我们制造出各种奇妙魔法的能力.其中就有此次要讨论的socket套接字操作.     二.socket概述         soc ...

  7. ES6中Class的继承关系

    es5实现中,每个对象都有__proto__属性(也就是关系图中[[prototype]]属性),指向对应的构造函数的prototype.Class 作为构造函数的语法糖,同时有prototype属性 ...

  8. 软件图书，偏.net方向

    深入理解计算机系统(原书第2版) 作者:Randal E.Bryant:1981年在麻省理工学院获计算机科学博士学位,现任美国卡内基·梅隆大学计算机学院院长 内容: 深入浅出地介绍了处理器.编译器.操 ...

  9. 面试Tips

    面试Tips 面向对象:准备找工作的同学 内容概述:关于面试的一些经验总结,希望能带给你些许帮助.若有描述不准确的地方,欢迎指点建议. 内容提炼:共分为四阶段 1.面试前之静生慧 (1)课本知识过一遍 ...

  10. QUdpSocket-Qt使用Udp通讯实现服务端和客户端

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QUdpSocket-Qt使用Udp通讯实现服务端和客户端     本文地址:https:// ...