.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. winform无边框窗体点击任务栏最小化

    protected override CreateParams CreateParams { get { const int WS_MINIMIZEBOX = 0x00020000; // Winus ...

  2. 【三小时学会Kubernetes!(五) 】完成整个架构

    完成整个架构 现在我们学习了完成架构的所有必须的资源,因此这一节会非常快.图 22 中灰色的部分是需要做的事情.让我们从底部开始:部署 sa-logic 的部署. 图 22:当前应用程序状态 部署 S ...

  3. Java编码方式再学

    一直以来对编码方式对了解不是很深入.建议读下这几篇博文 学点编码知识又不会死:Unicode的流言终结者和编码大揭秘 编码研究笔记 这几篇博文上回答了内心存在的一些问题,这些问题可能也是大家经常遇到的 ...

  4. Neutron二层网络服务实现原理

    网络 ​ 网络(network)是一个隔离的二层网段,类似于物理网络世界中的虚拟 LAN (VLAN).更具体来讲,它是为创建它的租户而保留的一个广播域,或者被显式配置为共享网段.端口和子网始终被分配 ...

  5. grunt-init 默认模板目录更正

    grunt-init是依赖grunt项目管理的脚手架工具,各种优点无须赘述,默认的template路径的作用:可以把自定义或其他模板放置其中,应用的时候直接调用模板名,不用每次寻找路径: 在安装gru ...

  6. MySQL使用通用二进制格式安装

      CentOS7安装MySQL的方法之通用二进制格式          

  7. CMDB后台管理(AutoServer)

    1.表结构设计 from django.db import models class UserProfile(models.Model): """ 用户信息 " ...

  8. LeetCode OJ:Partition List(分割链表)

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

  9. Windows平台编程涉及的函数

    VirtualAlloc 调用进程的虚拟地址空间 GetTickCount 返回从操作系统启动到当前所经历过的毫秒数 malloc.h内存分配函数,需要头文件malloc.h

  10. Ubuntu 14.10安装simplescalar

    经过两天的安装,终于把simplescalar安装成功,安装过程中在网上找了很多资料,但是很多都是关于低版本ubuntu安装的过程,而且按照这些教程也没有安装成功,来记录一下安装中出现的问题及解决方案 ...