图片 垂直居中
2016-05-14 10:27
330 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" >
<head>
<title>未知大小图片在已知大小容器水平/垂直居中</title>
<mce:style type="text/css"><!--
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:200px;
height:200px;
border: 1px solid #EEE;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
--></mce:style><style type="text/css" mce_bogus="1">
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:200px;
height:200px;
border: 1px solid #EEE;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}</style>
<body>
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" mce_src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>
</body>
</html>
相关文章推荐
- U-Boot源码——config.mk
- Echarts Cannot read property 'modLayer' of null
- UIWebView 的秘密
- 深入解析AsyncTask
- 三值排序
- Java 8的变化: 从永久代(PermGen)到元空间(Metaspace)
- android和java平台统一的DES加密解决方案,解决加密不一样的问题
- Nginx配置文件详细说明
- session内置对象JSP学习
- OC工程调用Swift方法
- 一些必不可少的Sublime Text 2插件
- 获取系统的时间
- 几种常见的搜索引擎检索模型
- 编译和使用zlib
- 为什么西汉“透光镜”会产生奇异的透光现象?
- Coursera机器学习-第四周-Neural Network ForwardPropagation
- Swift工程使用OC类
- jquery md5加密
- 征服你的面试官系列1---消息机制
- code1214 线段覆盖