.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. 【Python】模块学习之使用paramiko连接Linux,远程执行命令,上传下载、文件

    本文主要介绍paramiko远程执行linux命令,及在服务器上进行文件的上传.下载 paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. ...

  2. ECMAScript 5中对Array中新增了9个方法

    ECMAScript 5中对Array中新增了9个方法: 5个迭代方法(循环操作数组中的各个项):forEach(),map(),filter(),every()和some() 2个归并方法(迭代数组 ...

  3. 解决无法启动mysql服务错误1069

    之前在服务器上修改了my.ini文件 mysql就一直无法启动 后来把my.ini改回原来的,还是无法启动并报1069错误 在网上查了一下,基本上都是说修改mysql密码,再重新启动,试了一下没作用, ...

  4. JAVA执行带参数的SQL语句

    转自 http://www.cnblogs.com/raymond19840709/archive/2008/05/12/1192948.html

  5. anaconda的一些命令

    先安装好TensorFlow. 1.安装sklearn 本安装方式是在anaconda prompt上用命令来更新 (1)激活TensorFlow:activate tensorflow (2)查看是 ...

  6. 前端开发必备 - Emmet

    介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片 ...

  7. SQL SERVER 算法执行效率

    较差的性能 <---没有索引(为每个表执行表扫描) --->非聚集非覆盖索引(seek+局部有序扫描+lookups) ---> 聚集索引(seek+局部扫描) ---> 非聚 ...

  8. DNS智能解析的搭建与配置

    分类: LINUX 原文地址:DNS智能解析的搭建与配置 作者:十年梦生  9月份整整忙了一个月,都抽不出时间来写篇文章,这几天趁着10.1终于有时间来写些东西了,将9月份所做的一些东西来做下总结. ...

  9. C# 设计模式巩固 - 简单工厂模式

    前言 设计模式的文章很多.鄙人不才文笔也不咋地.写这篇只为巩固下基础知识,万一不小心帮到了您,是我莫大的荣幸!写的不好欢迎码友指正,废话结束开始进入正题. 介绍 - 简单工厂模式 官方定义:(尴尬~貌 ...

  10. ZOJ-2972-Hurdles of 110m(线性dp)

    Hurdles of 110m Time Limit: 2 Seconds      Memory Limit: 65536 KB In the year 2008, the 29th Olympic ...