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;
}
另一种设置图片垂直的简单方法:
1.设置DIV的属性

2.设置span的属

3.设置图片的属性

4.HTML的源代码

5.原理: 利用vertical-align实现垂直,决定行高的是行内最高的元素的值。
css设置图片水平及垂直居中的更多相关文章
- 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设置图片居中、居左、居右
CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...
- CSS制作图片水平垂直居中 亲测推荐
空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...
- CSS设置图片垂直居中的方法
如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
- css实现图片水平垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使图片水平并垂直居中的一个Hack
淘宝的一个前端面试题:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中. 想起了vertical-align:middle;但是不行,后来才知道还要di ...
- CSS设置图片居中的方法
如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
随机推荐
- 实例化后的map的默认值
public class map默认值 { public static void main(String[] args) { Map<String, String> resultMap = ...
- Mysql5.7基于日志主从复制
主从同步概念 主从同步是异步复制 Mysql两种复制类型: 基于二进制日志 使用GTID完成基于事务的复制 基于日志三种方式: Mysql5.7需要注意的问题: 老版本方法创建mysql用户 #mys ...
- uva11626逆时针排序
给一个凸包,要求逆时针排序,刚开始一直因为极角排序就是逆时针的,所以一直wa,后来发现极角排序距离相同是,排的是随机的,所以要对末尾角度相同的点重新排一次 #include<map> #i ...
- UVA-10047 The Monocycle (图的BFS遍历)
题目大意:一张图,问从起点到终点的最短时间是多少.方向转动也消耗时间. 题目分析:图的广度优先遍历... 代码如下: # include<iostream> # include<cs ...
- Xshell高级后门完整分析报告(ZT)
1. 前言 近日,Xshell官方发布公告称其软件中存在后门.我们的实习生同学对该后门进行了详细的分析,确认这是一个具备恶意代码下载执行和数据回传等能力的高级木马. 后门代码存在于nssock2.dl ...
- Repeat a string repeat a string
重要的事情说3遍! 重复一个指定的字符串 num次,如果num是一个负数则返回一个空字符串. 这是一些对你有帮助的资源: Global String Object 这道题的思路就是按照题目要求一步一步 ...
- EPANET中的typedef使用
struct Floatlist /* Element of list of floats */{ double value; struct Floatlist *next;};typ ...
- C++复习9.面向对象编程
C++ 面向对象编程概述 20131001 一些基本概念:封装.继承.组合.虚函数.抽象基类.动态绑定.多态性等等 1.一个笑话:如果坐在后排聊天的同学能够像中间打牌的同学那样安静的话,那么就不会影响 ...
- 在关于原生js获取getAttribute如果是src的一点注意事项
最近抽空把seajs看完了 他们在fix代码的时候,写明在某浏览器下的情况和官方文档出处,这样有据可查.太赞了 顺便把我想要这段摘出来 可以直接dom.src,但是在ie6-7中是不支持的,并且在ge ...
- iOS 数组集合操作(交集,并集,差集,子集)
1.求数组的 交集,并集,差集 NSArray *array1 = @[@"1",@"2",@"3"]; NSArray *array2 = ...