方法一:

这种方法可实现图片超出frame尺寸时,自动选择水平、垂直居中,效果如下

<div class="frame">
<img src="foo"/>
</div> .frame {
height: 160px; /*can be anything*/
width: 160px; /*can be anything*/
position: relative;
}
img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

demo: 图片居中

方法二:

原理是,使用协助元素(这里是span),作为img的相邻元素,同为inline-block的两元素相邻时增加vertical-align: middle

可使两元素垂直居中,代码如下

<div class=frame>
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250 />
</div> .frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap; text-align: center; margin: 1em 0;
} .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
} img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}

demo: 图片居中

如何将img垂直居中?的更多相关文章

  1. CSS垂直居中的11种实现方式

    今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...

  2. css元素水平居中和垂直居中的方式

    关于居中的问题,一直处于疑惑不解的状态,知道的几种方法好像也不是每一次都会起到作用,所以更加迷惑.主要是不清楚该 在什么情况下采用哪种解决方法,所以,整理了一些方法,梳理一下思路,做一个总结. 1. ...

  3. [css]实现垂直居中水平居中的几种方式

    转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...

  4. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  5. CSS垂直居中总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 <div class="container"> & ...

  6. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

  7. CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  8. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  9. IE6+未知尺寸元素水平垂直居中

    首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...

  10. html文本垂直居中对齐

    html文本垂直居中对齐,代码如下: <div id="box" style="height:100px; line-height:100px; border:1p ...

随机推荐

  1. Python2.7-copy

    copy 模块,python 中的‘=’是使左边的对象成为右边对象的一个引用,对不可变对象(如数字,字符串等)使用‘=’一般不会出现问题,但当对字典,列表等可变对象进行‘=’操作时,要注意修改其中一个 ...

  2. P1272 重建道路

    题目描述 一场可怕的地震后,人们用N个牲口棚(1≤N≤150,编号1..N)重建了农夫John的牧场.由于人们没有时间建设多余的道路,所以现在从一个牲口棚到另一个牲口棚的道路是惟一的.因此,牧场运输系 ...

  3. HDU 2709 Sumsets 经典简单线性dp

    Sumsets Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  4. Xcode添加全局引用文件pch

    Xcode6之前有PrefixHeader.pch文件在写项目的时候,大部分宏定义.头文件都导入在这个pch文件,虽然方便,但会增加Build的时间,所以Xcode6以及之后的版本去除了PrefixH ...

  5. BZOJ3786: 星系探索 Splay+DFS序

    题目大意:给你一个树,支持三种操作,子树加,点到根的路径和,改变某一个点的父亲. 分析: 看起来像一个大LCT,但是很显然,LCT做子树加我不太会啊... 那么,考虑更换一个点的父亲这个操作很有意思, ...

  6. kvm虚拟化一: 图形化的管理方式

    1.安装必要工具yum install -y / qemu-kvm //kvm主程序 libvirt //虚拟化服务库 libguestfs-tools //虚拟机系统管理工具 virt-instal ...

  7. cocos2d-x学习记录2——CCAction动作

    CCAction能够使CCNode运动起来,能够呈现出多种多样的动作.这些动作能够改变其运动方向.形状.大小.旋转等. 同时,还可利用CCCallFunc.CCCallFuncN.CCCallFunc ...

  8. libgdx自制简易版Don't Touch The White Tile

    Don't Toutch The White说来也奇快,本来没什么难的,但是在欧美ios榜上却雄踞榜首好长时间.即使是在国内,也很火,还真是想不通,谁能解释下,难道真是所谓的抓住了用户的G点,或是这些 ...

  9. mysql基础(二)—— 简单sql

    查询 select * from company select c.code from company c; select m.bookname from myview m; (myview为视图) ...

  10. 一个Python开源项目-哈勃沙箱源码剖析(下)

    前言 在上一篇中,我们讲解了哈勃沙箱的技术点,详细分析了静态检测和动态检测的流程.本篇接着对动态检测的关键技术点进行分析,包括strace,sysdig,volatility.volatility的介 ...