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. libvlc 双击,鼠标事件消息响应

    基于vlc 2.1 动态库实现接收双击消息的接收,使双击vlc播放画面可以全屏显示. 需要其他版本的vlc可以与我联系(有偿进行修改) 下载地址:http://download.csdn.net/de ...

  2. sdut2536字母哥站队(dp)

    简单DP  说是简单 还是推了好一会 推出来觉得好简单 保留当前i的最小值 dp[i] = min(dp[i],dp[j]+i-j-1) j<i #include <iostream> ...

  3. 【转】在Xcode中使用Git进行源码版本控制 -- 不错

    原文网址:http://www.cocoachina.com/ios/20140524/8536.html 本文翻译自Understanding Git Source Control in Xcode ...

  4. OAuth 的权限问题与信息隐忧

    核心提示:以 QQ 登陆和微博登陆为代表的“一键登陆”背后不仅仅是登陆这么简单,它还默认获取了你的其他隐私资料和账号的部分使用权限,我们在享受便利的同时一定不要忘记保护好我们的个人信息安全. 去年3Q ...

  5. sublimelinter-jshinter

    --- ocalhost:~ nihao$ sudo npm install jshint -gPassword:/usr/local/bin/jshint -> /usr/local/lib/ ...

  6. leecode 树的平衡判定 java

    以前写过c++版本的,感觉java写的好舒心啊/** * Definition for binary tree * public class TreeNode { * int val; * TreeN ...

  7. 五指cms安装说明

    1.五指cms目录结构说明 |-- coreframe                   #框架目录 |   |-- app                     #模块(应用程序)目录 |    ...

  8. 怎样做出通用的pos小票打印程序

    POS小票打印机分为热敏和针式俩种. 打印纸的宽度分为58毫米.76毫米和80毫米三种. 打印接口分为:串口.并口.USB和网口(以太网). 热敏打印机速度较快,打印的时候噪音少,针打可以使用多联纸自 ...

  9. android图片闪烁或帧动画

    remote_recording_transition.xml 文件 <?xml version="1.0" encoding="utf-8"?> ...

  10. [三]JFreeChart实践二

    功能: 1.设置带色彩的柱状图 2.可以设置多组数据的展示 3.可以设置图标的背景色 4.可以设置柱与柱之间的距离 5.可以设置柱子上边是否显示具体的数值