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. 坑爹的UICollectionView

    最近用UICoolectionView的时候遇到一个很DT的问题,我往VC里加12个视图,结果显示成这样(右边是期待的样子):       研究了一下午,终于发现了问题: @interface FpL ...

  2. Android 导出db并查看内容

    1.导出sqlite的db文件: 使用工具DDMS,切换到DDMS,显示File Explorer窗口,找到/data/data/应用名/databases/数据库名,点击导出按钮,导出文件. 2.使 ...

  3. JSP个人总结

    应用JSP技术开发动态网站 JSP基本语法 默认JSP: <%@ page language="java" contentType="text/html; char ...

  4. bzoj3611

    会构建虚树之后就是noip提高组的题目了稍微难一点的是求代价和,只要注意按一个方向避免重复计算贡献即可 ; type node=record po,next:longint; end; ..] of ...

  5. 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

    绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理 ...

  6. If-Modified-Since & If-None-Match

    google告诉网站站长:您的网络服务器支持 If-Modified-Since HTTP 标头.通过该功能,您的网络服务器可以告诉 Google 自上次抓取您的网站以来,内容是否已发生变化.该功能可 ...

  7. Cookie的Domain

    每个Cookie都有常用的几个元素:name.value.expires.domain Cookie的Domain 设置cookies时,可以设置cookie的域名参数domain,标识cookie在 ...

  8. ORA-00214: control file 控制文件版本不一致

    故障现象:今日学习oracle控制文件移动和修改,发现本机安装oracle数据库启动时只使用了一个控制文件.如下:SQL> select * from V$controlfile; STATUS ...

  9. [POJ2234]Matches Game

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9297   Accepted: 5365 Description Here ...

  10. apple mac 下使用机械键盘的办法,键盘映射工具软件,apple mac Mechanical keyboard

    apple mac 下使用机械键盘的办法,键盘映射工具软件,apple mac Mechanical keyboard 想在苹果电脑 mac 系统下使用 机械键盘,大部分机械键盘不是为mac设计的,所 ...