使图片水平并垂直居中的一个Hack
淘宝的一个前端面试题:使用纯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的更多相关文章
- DIV里面的图片水平与垂直居中的方法
<div class=“box”> <img /> </div> 1.水平居中: 1)box设置 text-align:center ; text-alig ...
- DIV或者DIV里面的图片水平与垂直居中的方法
<div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...
- css 使图片水平垂直居中
1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...
- css设置图片水平及垂直居中
.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:cen ...
- js脚本控制图片水平与垂直居中
使用方法: 1.定义ResizeImg(obj)方法 function ResizeImg(obj) { var boxHeight = $(".box").height(); v ...
- css 水平、垂直居中
水平居中 行内元素 行内元素:(img.span.文字等行内元素),通过在父级元素设置 text-align:center 使元素水平居中. 块级元素 块级元素:(div.p.h1...h6.ul.l ...
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...
- 使当前对象相对于上层DIV 水平、垂直居中定位
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- Android开发点滴 - 如何使按钮水平垂直居中且始终占据屏幕宽度一半
问题描述: 如何使按钮水平垂直居中且始终占据屏幕宽度一半 效果如下: 竖屏: 横屏: 解决方案: 使用线性布局,指定线性布局的总权重(weightSum)为1, 指定按钮的权重为其一半即0.5 布局代 ...
随机推荐
- 【Java】 秒转时分秒天
总有时候会有些需求, 需要用到秒, 比如 JedisCluster 设置过期时间 现在有一个需求是 : 查询接口的缓存设置有效期为:1天+随机时间 基本可以按以下来做: package com.lwc ...
- HWI的安装
一.安装的过程 hwi的安装过程: 1.解压src源码包:tar -zvxf apache-hive-1.2.2-src.tar.gz 2.进到HWI目录下:cd /home/bigdata/apac ...
- 高可用Kubernetes集群-4. kubectl客户端工具
六.部署kubectl客户端工具 1. 下载 [root@kubenode1 ~]# cd /usr/local/src/ [root@kubenode1 src]# wget https://sto ...
- java高cpu占用和高内存占用问题排查 (转)
高cpu占用 1.top命令:Linux命令.可以查看实时的CPU使用情况.也可以查看最近一段时间的CPU使用情况. 2.PS命令:Linux命令.强大的进程状态监控命令.可以查看进程以及进程中线程的 ...
- ES6的新特性(4)——字符串的扩展
字符串的扩展 ES6 加强了对 Unicode 的支持,并且扩展了字符串对象. 字符的 Unicode 表示法 JavaScript 允许采用\uxxxx形式表示一个字在\u0000~\uFFFF之间 ...
- DataGridView,Dataset,DataTable,DataRow等使用心得
DataGridView的列编辑: Name:用于调用属性的时候用的,也可以不使用Name去调用,选择数字1,2,3...选择第1列,第2列,第3列. HeaderText:表头显示的名字方便用户使用 ...
- Access连接数据源配置(新手必知)
今天要连接Access时发现win7 64位旗舰版控制面板中管理工具下的数据源(ODBC)配置竟然只有SQLServer的驱动,其他的都没有了,这可不好玩!上网百度了一番,有人也遇过这样的问题,我在此 ...
- 1014C程序语法树
程序:冒泡算法C程序 #include <stdio.h> main() { int i,j,temp; int a[10]; for(i=0;i<10;i++) scanf (&q ...
- jquery validate 一个注册表单的应用
先看页面 前端表单代码 register.html <form class="mui-input-group" id="regForm"> < ...
- HDU4802_GPA
水题. #include <iostream> #include <cstdio> #include <cstring> using namespace std; ...