.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. ClipboardJS的坑,

    new 一下构造函数就出错了,为什么...Uncaught TypeError: Cannot read property 'addEventListener' of nullat r (clipbo ...

  2. mysql数据库优化课程---15、mysql优化步骤

    mysql数据库优化课程---15.mysql优化步骤 一.总结 一句话总结:索引优化最立竿见影 1.mysql中最常用最立竿见影的优化是什么? 索引优化 索引优化,不然有多少行要扫描多少次,1亿行大 ...

  3. 获得Python脚本所在目录

    如何获得Python脚本所在目录的位置   On this page... (hide) 1.  以前的方法 2.  正确的方法 3.  实例说明   (Edit) 1.  以前的方法 如果是要获得程 ...

  4. log4cpp之Appender

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  5. scala学习之实现RPC通信

    最近学习scala,个人感觉非常灵活,实现rpc通信非常简单,函数式编程比较烧脑 1.搭建工程 创建scala maven 工程 项目pom文件 <project xmlns="htt ...

  6. L153

    警言是指传达一般真理或某种言论的短小句子.An aphorism is a short witty sentence which expresses a general truth or commen ...

  7. Linux:grep命令详解

    grep grep(global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具, ...

  8. Jmter安装和配置

    一.安装JDK 安装JDK 选择安装目录 安装过程中会出现两次安装提示 .第一次是安装 jdk ,第二次是安装 jre .建议两个都安装在同一个java文件夹中的不同文件夹中.(不能都安装在java文 ...

  9. Java基础部分全套教程.

    这是我自己早前听课时整理的java基础全套知识,使用于初学者,也可以适用于中级的程序员,我做成了chm文档的类型,你们可以下载 笔记是比较系统全面,可以抵得上市场上90%的学习资料.讨厌那些随便乱写的 ...

  10. Goroutine是如何工作的?

    翻译原文链接 转帖/转载请注明出处英文原文链接 发表于2014/02/24 Go语言 如果你刚刚接触Go语言,或者说你并不理解“并发不等于并行”这句话的含义,那么Rob Pike的讲座值得一看(在yo ...