css图片垂直居中
一.style代码

    .case-pic{
height: 125px;
position: relative;
text-align: center
}
.case-pic span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
.case-pic .img{
height: 60px;
vertical-align:middle;
}

二.html代码

<div class="case-pic"><span></span><img src="public/images/case_1.jpg" alt="" /></div>
												

css图片垂直居中的更多相关文章

  1. css 图片垂直居中总结

    1.利用vertical-align:middle: 父级元素设置成display:table-cell; 同级元素设置一个span标签 设置display:inline-block:图片样式设置ve ...

  2. CSS图片垂直居中方法

    让div里面的多行文本垂直居中的方法: div{height:100px;width:100px;border:solid 1px red;text-align:center; display:tab ...

  3. CSS图片垂直居中方法整理集合

    原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...

  4. css垂直居中怎么设置?文字上下居中和图片垂直居中

    css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题.垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下. css文字上下 ...

  5. css图片居中(水平居中和垂直居中)

    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...

  6. CSS让图片垂直居中的几种技巧

    在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...

  7. 几种垂直居中的方式及CSS图片替换技术

    由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和 ...

  8. CSS中如何实现未知尺寸图片垂直居中

    在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是随意,而是有其现实的原因,垂直居中 ...

  9. CSS设置图片垂直居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

随机推荐

  1. wzplayer2 for windows ActiveX 试用地址

    提供wzplayer2 for windows ActiveX,测试地址:http://www.coolradio.cn/IE.htm 大家使用时候必须允许未签名ActiveX下载和运行,否则将无法正 ...

  2. Hello Indigo

    Windows Communication Foundation (WCF),formerly code-named “Indigo,” is Microsoft’s platform for Ser ...

  3. hdu4649Professor Tian

    http://acm.hdu.edu.cn/showproblem.php?pid=4649 枚举当前状态是0或者是1的概率 其实就枚举1的概率 最后概率乘这个数 位运算用得不熟  老出错 #incl ...

  4. iphone4s丢失如何找回

    iphone4s丢失如何找回 iphone4s手机丢了怎么办,其实苹果手机自带找回功能,但是前提你得打开了icloud这款软件. 方法/步骤 1 在手机的设置里找到icloud设置,如图. 2 点击进 ...

  5. 【Android】Android部分问题记录

    1.EditText不显示光标 开发的时候遇到有部分手机,小米系列以及华为部分手机不显示光标. 设置EditText属性 android:textCursorDrawable="@null& ...

  6. LVS与其他负载均衡软件的区别

    有人在邮件列表问haproxy的作者为何haproxy无论是tcp模式还是http模式,能支撑的并发量都不是太大. Willy回答了这个问题.   Exactly. The difference is ...

  7. [Jacky] 解决Ext.Net GridPanel 选择的行数据刷新后不能获取最新值

    选择GridPanel中一行数据,当变更数据时并重新刷新之后不能获取最新值,需通过如下方式获取: var internalId = gridPanel.getSelectionModel().getL ...

  8. Nhibernate Icreteria 分页查询

    1.创建查询条件,条件为一个ICreterion的列表 ///        /// 创建Criteria(不含order,因为获取总数的时候,为了性能考虑,不加order)        ///   ...

  9. [CCC 1996 01]Deficient, Perfect, and Abundant

    CCC加拿大高中生信息学奥赛 其余来源 CODEVS[3312]——CCC 1996 01 Deficient, Perfect, and Abundant ——http://codevs.cn/pr ...

  10. [codevs4247]奇特的生物

    题目描述 Description 科学家们最近发现了一种奇怪的生物,它们每天长大一岁,刚出生的宝宝为1岁,且它们的年龄没有上限.已知年龄为1岁,2岁,3岁,……,k岁的个体具有生育能力,当年龄为i的具 ...