.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设置图片水平及垂直居中的更多相关文章

  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设置图片居中、居左、居右

      CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...

  4. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  5. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

  6. CSS设置图片垂直居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  7. css实现图片水平垂直居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 使图片水平并垂直居中的一个Hack

    淘宝的一个前端面试题:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中. 想起了vertical-align:middle;但是不行,后来才知道还要di ...

  9. CSS设置图片居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

随机推荐

  1. 实例化后的map的默认值

    public class map默认值 { public static void main(String[] args) { Map<String, String> resultMap = ...

  2. Mysql5.7基于日志主从复制

    主从同步概念 主从同步是异步复制 Mysql两种复制类型: 基于二进制日志 使用GTID完成基于事务的复制 基于日志三种方式: Mysql5.7需要注意的问题: 老版本方法创建mysql用户 #mys ...

  3. uva11626逆时针排序

    给一个凸包,要求逆时针排序,刚开始一直因为极角排序就是逆时针的,所以一直wa,后来发现极角排序距离相同是,排的是随机的,所以要对末尾角度相同的点重新排一次 #include<map> #i ...

  4. UVA-10047 The Monocycle (图的BFS遍历)

    题目大意:一张图,问从起点到终点的最短时间是多少.方向转动也消耗时间. 题目分析:图的广度优先遍历... 代码如下: # include<iostream> # include<cs ...

  5. Xshell高级后门完整分析报告(ZT)

    1. 前言 近日,Xshell官方发布公告称其软件中存在后门.我们的实习生同学对该后门进行了详细的分析,确认这是一个具备恶意代码下载执行和数据回传等能力的高级木马. 后门代码存在于nssock2.dl ...

  6. Repeat a string repeat a string

    重要的事情说3遍! 重复一个指定的字符串 num次,如果num是一个负数则返回一个空字符串. 这是一些对你有帮助的资源: Global String Object 这道题的思路就是按照题目要求一步一步 ...

  7. EPANET中的typedef使用

    struct  Floatlist  /* Element of list of floats */{   double  value;   struct  Floatlist *next;};typ ...

  8. C++复习9.面向对象编程

    C++ 面向对象编程概述 20131001 一些基本概念:封装.继承.组合.虚函数.抽象基类.动态绑定.多态性等等 1.一个笑话:如果坐在后排聊天的同学能够像中间打牌的同学那样安静的话,那么就不会影响 ...

  9. 在关于原生js获取getAttribute如果是src的一点注意事项

    最近抽空把seajs看完了 他们在fix代码的时候,写明在某浏览器下的情况和官方文档出处,这样有据可查.太赞了 顺便把我想要这段摘出来 可以直接dom.src,但是在ie6-7中是不支持的,并且在ge ...

  10. iOS 数组集合操作(交集,并集,差集,子集)

    1.求数组的 交集,并集,差集 NSArray *array1 = @[@"1",@"2",@"3"]; NSArray *array2 = ...