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. 删除Windows中隐藏的物理网卡和网络虚拟化失败后的虚拟网卡

    Windows环境下,在更换硬件服务器主板和网卡等硬件.恢复操作系统或者网络虚拟化失败后,可能会出现网卡方面的问题.例如,设备管理器中多了不应该存在的网卡:因命名冲突无法重命名当前网络连接:IP地址冲 ...

  2. Linux简介及常用命令使用4--linux高级命令与技巧

    top 几个磁盘fdisk -l 磁盘空间 df -lhdf -al 查看进程:ps -ef"grep java杀死进程:kill -9 进程号 more中过滤 more xxx |grep ...

  3. mvn常用命令

    1. mvn compile 编译源代码 2. mvn test-compile 编译测试代码 3. mvn test 运行测试 4. mvn package 打包,根据pom.xml打成war或ja ...

  4. 一个"如何使用示波器安全测试接市电电路板"的问题

    最近犯了一个错误测试操作: 测试场景:直接从市电插座取电接入3W非隔离开关电源电路板,使用示波器测试输出电压,此时示波器通过另外一个插座直接从市电取电 测试后果:在将示波器接到输出负极的一瞬间,漏电保 ...

  5. h3c防火墙的设置过程

    公司采购了一款h3c的防火墙,型号为F100-E-G,以前也设置过H3C的防火墙,不过这次还是设置还是有各种问题,所以把设置过程记录下来,方便以后查阅. 一.防火墙一般在0口都设置一个默认的IP地址1 ...

  6. MATLAB数字图像处理基础

    图像的输入.输出和显示 1.图像的输入    imread('filename'),  实际中写的是 >> f = imread('sky.jpg'); 2.图像的显示    imshow ...

  7. Python的hasattr() getattr() setattr() 函数使用方法详解

    hasattr(object, name)判断一个对象里面是否有name属性或者name方法,返回BOOL值,有name特性返回True, 否则返回False.需要注意的是name要用括号括起来 1 ...

  8. visual studio 2015中的webapi生成helpPage，页面不显示方法说明问题解决

    环境: vs2015.win7 参考:http://www.cnblogs.com/Erik_Xu/p/5638381.html 生成的help页面如下:,并没有显示控制器和方法. 原因是:新建项目时 ...

  9. SSH整合 遇到的头疼的BUGs

    折腾了7个小时,一个项目重新的拷贝.编译.部署.运行.测试,我终于知道了产生问题的所在. 问题一:项目编码没有问题,访问会报404 资源不可用 没有进行重新编译,编译完就好了,可能是拷贝项目的时候,没 ...

  10. 潭州学院-JavaVIP的Javascript的高级进阶-KeKe老师

    潭州学院-JavaVIP的Javascript的高级进阶-KeKe老师 讲的不错,可以学习 下面是教程的目录截图: 下载地址:http://www.fu83.cn/thread-283-1-1.htm ...