.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. IDEA 中使用 Vue 提示 namespace is not bound

    今天在 IDEA 中使用 vue.js 时提示我如下错误信息 解决方法: 把这个校验项目去掉就可以了.

  2. C#区块链零基础入门,学习路线图 转

    C#区块链零基础入门,学习路线图 一.1分钟短视频<区块链100问>了解区块链基本概念 http://tech.sina.com.cn/zt_d/blockchain_100/ 二.C#区 ...

  3. Java连接MySQL数据库——代码

    工具:eclipse MySQL5.7.17 MySQL连接驱动:mysql-connector-java-5.1.43.jar 加载驱动:我是用MAVEN进行管理 数据库连接信息: 数据库名称:wu ...

  4. 三十一 Python分布式爬虫打造搜索引擎Scrapy精讲—chrome谷歌浏览器无界面运行、scrapy-splash、splinter

    1.chrome谷歌浏览器无界面运行 chrome谷歌浏览器无界面运行,主要运行在Linux系统,windows系统下不支持 chrome谷歌浏览器无界面运行需要一个模块,pyvirtualdispl ...

  5. IOS - 前台时的推送弹窗效果

    作者:Pikacode 原文链接:http://www.jianshu.com/p/67864e1c2085 本文获作者授权转载 或许很多童鞋还不知道,在 iOS 中收到推送通知时,如果 App 处于 ...

  6. 关于Mac上使用ideviceinstaller操作iPhoneXR等24位UDID设备报“ERROR: Invalid UDID specified”解决办法

    最近新申请了一台iPhone XR, 测试时发现使用ideviceinstaller命令老是报错: Jackeys-MacBook-Pro:~ jackey$ ideviceinstaller -u ...

  7. linux 常用一些指令

    1.后台执行 nohup /bin/bash import.sh 1>&2 2>log & 2.生成脚本 for i in `ls` ; do echo "mys ...

  8. LNMP的搭建与原理

    常见的web框架结构:例如:lnmp和:ampL=LINUX N=NGINX A=APACHE P=php T=Tomcat lnmp的原理 在LNMP组合工作时,首先是用户通过浏览器输入域名请求Ng ...

  9. LeetCode OJ:Letter Combinations of a Phone Number(数字字母组合)

    Given a digit string, return all possible letter combinations that the number could represent. A map ...

  10. Ubuntu 13.10 如何修改背景色--豆沙绿

    如何修改Ubunut 13.10的窗口背景色,在网上找到了多资料,安装了dconf,Unity Tweak Tool,GNOME Color Chooser都无法修改背景色. 最后,还是直接去修改主题 ...