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

添加的span标签要给高度100%; display:inline-block;

HTML

<div>

    <span></span>

    <img src="data:images/list3_1.jpg">

</div>

　css

<style type="text/css">

    div {

        width: 400px;

        height: 300px;

        display: table-cell;

        /*水平居中*/

        text-align: center;

    }

    div span{

        display: inline-block;

        height: 100%;

        vertical-align: middle;

    }

    div img {

        vertical-align:middle;

    }

</style>

　实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<style type="text/css">

    div {

        width: 400px;

        height: 300px;

        display: table-cell;

        /*水平居中*/

        text-align: center;

    }

    div span{

        display: inline-block;

        height: 100%;

        vertical-align: middle;

    }

    div img {

        vertical-align:middle;

    }

</style>

<div>

    <span></span>

    <img src="data:images/list3_1.jpg">

</div>

</body>

</html>

2.上面的结构 会多个多余的标签

HTML

<div>

<a href="">

<img src="">

</a>

</div>

　CSS

div {

width:221px;

height:70px

}

div a{

display:inline-block;

width:221px;

height:70px;

line-height:70px; /*垂直居中关键 行高 高度 inline-block 还有图片vertical-align:middle*/

text-align:center; /*水平居中*/

}

div a img{

vertical-align"middle;

}

兼容 IE7+以上可以　　

　

　　

　

　

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

  1. css图片垂直居中

    css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...

  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. Unity贴图锯齿

    之前在做一个Unity视频插件,发现渲染上去的贴图锯齿十分明显,开了抗锯齿也没用.最后在一次偶然的机会,发现了原来是贴图FilterMode设置有问题 之前用的是FilterMode.Point,后来 ...

  2. OpenStack云计算快速入门之二：OpenStack安装与配置

    原文:http://blog.chinaunix.net/uid-22414998-id-3265685.html OpenStack云计算----快速入门(2) 该教程基于Ubuntu12.04版, ...

  3. OpenStack 行业正进入拓展期：行业云将成为新一轮工业革命的基础设施和引擎

    一直在关注华为2016 Connect 大会,本来没票,后来找朋友搞到了一张,参加了大会第一天下午的会议,时间虽短,但非常有收获.本来出发前还带了纸和笔,但是到了现场才发现只带了笔记本,笔却丢下了,所 ...

  4. 面试问题2：给一个5G的大文件，保存的数据为32位的整型，找到所有出现次数超过两次的数字

    问题描述:给一个5G的大文件,保存的数据为32位的整型,找到所有出现次数超过两次的数字 大数据操作: 解决方法一: 依次遍历文件数据, 开始32二进制清0 每次读取一个数,先和二进制位与,如果为0 则 ...

  5. WinCE项目应用汇总

    虚拟仪器(VI) RM905a+医用放射性核素活度计 RM905a+活度计远程检定方法研究 车载导航

  6. 洛谷P1962 斐波那契数列 || P1349 广义斐波那契数列[矩阵乘法]

    P1962 斐波那契数列 大家都知道,斐波那契数列是满足如下性质的一个数列: • f(1) = 1 • f(2) = 1 • f(n) = f(n-1) + f(n-2) (n ≥ 2 且 n 为整数 ...

  7. Jsp 错题分析

    ArrayList删除元素通过RemoveAt(int index)来删除指定索引值的元素 运行时异常都是RuntimeException类及其子类异常,如NullPointerException.I ...

  8. 第三章SQL编程

    本章目标: 1.使用变量 2.输出语句 3.数据类型转换 4.逻辑控制语句 5.批处理 一.变量 1.什么是变量呢? 变量是存储数据的容器 T-SQL中的变量分为局部变量和全局变量 2.局部变量 局部 ...

  9. UNIX系统基本结构

    UNIX系统的基本结构如图所示.整个UNIX系统可分为五层:最底层是裸机,即硬件部分:第二层是UNIX的核心,它直接建立在裸机的上面,实现了操作系统重要的功能,如进程管理.存储管理.设备管理.文件管理 ...

  10. python高级之多线程

    python高级之多线程 本节内容 线程与进程定义及区别 python全局解释器锁 线程的定义及使用 互斥锁 线程死锁和递归锁 条件变量同步(Condition) 同步条件(Event) 信号量 队列 ...