淘宝的一个前端面试题：使用纯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. Python Web部署方式全汇总

    学过PHP的都了解,php的正式环境部署非常简单,改几个文件就OK,用FastCgi方式也是分分钟的事情.相比起来,Python在web应用上的部署就繁杂的多,主要是工具繁多,主流服务器支持不足. 在 ...

  2. PHP核心技术——魔术方法

    魔术方法: 魔术方法是以两个下画线开头.具有特殊作用的一些方法,可以看做PHP的"语法糖". set和get方法: class Account{ private $user=1; ...

  3. 【视频编解码·学习笔记】4. H.264的码流封装格式 & 提取NAL有效数据

    一.码流封装格式简单介绍: H.264的语法元素进行编码后,生成的输出数据都封装为NAL Unit进行传递,多个NAL Unit的数据组合在一起形成总的输出码流.对于不同的应用场景,NAL规定了一种通 ...

  4. [T-ARA][HOLIDAY]

    歌词来源:http://music.163.com/#/song?id=22704407 HOLI HOLI DAY [HOLI HOLI DAY] 뚜뚜 뚜루루 [ddu-ddu ddu-lu-lu ...

  5. [redis] linux下安装篇(1)

    一.redis是什么redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zset(有 ...

  6. sprint2 团队贡献分

    团队名:在考虑 团队贡献分: 102 杨晶晶:17 106 邹育萍:18 114 纪焓:16 116 黄敏鹏:28 117 郑培轩:26 138 曾昱霖:15 最新项目的github地址: https ...

  7. 20181120-6 Beta阶段第2周/共2周 Scrum立会报告+燃尽图 03

    此作业要求参见:[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2411] 版本控制地址    [https://git.coding.n ...

  8. "Hello World!"团队第十次会议

    Scrum会议 今天是我们"Hello World!"团队第十次召开会议,博客内容是: 1.会议时间 2.会议成员 3.会议地点 4.会议内容 5.todo list 6.会议照片 ...

  9. CS小分队第二阶段冲刺站立会议（5月29日）

    昨日成果:昨天在为主界面设计自主添加应用快捷方式功能,连续遇到困难. 遇到的困难:1.string字符串数组无法在单击事件中使用,提示string无法在eventargs中检索,尝试了各种方式都不行 ...

  10. OpenNF tutorial复现

    这篇博客记录了自己实现OpenNF官网上tutorial的过程和遇见的问题,如果有不对的地方还请批评指正! tutorial链接 实验内容 这个实验展示了如何迅速且安全地把一个TCP流从一个NF实例迁 ...