一、原始的居中方法是把div换成table

<div style="width: 500px; height: 200px; border: solid 1px red; text-align: center">

   <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
</div> 
<div style="width: 500px; height: 200px; border: solid 1px red;">
   <center>
      <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
   </center>
</div>
<table style="width: 500px; height: 200px; border: solid 1px red; text-align:center">
  <tr>
      <td>
      <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
      </td>
  </tr>
</table>
 
二、但是如果外层div是浮动且按照百分比排列的话，你要怎么做？
此时，请看图下的关键代码，可实现不同分辨率下的图片垂直左右居中。

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>图片垂直水平居中</title>
<style>
div{height:500px;width:400px;text-align:center;border:1px solid #000;margin:20px auto;}
img{vertical-align:middle;}  /* 关键代码 */
span{height:100%;display:inline-block;vertical-align:middle;} /* 关键代码 */
</style>
</head>
 
<body>
    <div>
        <img src="http://img.o571.com/fc/ad/20130827161606949.jpg" width="323" height="215" />
        <span></span>
    </div>
</body>
</html>

css怎么让图片垂直左右居中?(外层div是浮动且按照百分比排列)的更多相关文章

  1. css 实现文字图片垂直对齐

    给图片使用vertical-align:middle;就可以实现 <!DOCTYPE html> <html lang="en"> <head> ...

  2. IE浏览器中overflow:hidden无效，内层元素超出外层div的解决方法

    原文地址:http://www.xin126.cn/show.asp?id=2624 在用css布局的时候,用IE浏览器(ie6.ie7.ie8)预览,有时候会出现内层元素(内部DIV.图片等)超出外 ...

  3. Js配合CSS实现的图片居中

    CSS图上居中很好实现,但万恶的浏览器之间各不相让,搞的不兼容,还好我们有让其兼容的办法,那就是结合JS来实现,这样各个浏览器都听话多了.本例就是CSS结合JavaScript实现的图片垂直.水平方向 ...

  4. css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法？）

    实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...

  5. 问题2：css图片、文字居中

    1. 文本或图片水平对齐:父元素中添加以下样式     text-align : center;2. 单行文字垂直对齐:父元素中添加以下样式     line-height : 父元素高度; 3.图片 ...

  6. 如何使用css来让图片居中不变形 微信小程序和web端适用

    图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...

  7. 使图片相对于上层DIV始终水平、垂直都居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 如何让图片相对于上层DIV始终保持水平、垂直都居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 关于用css实现文本和图片垂直水平居中

    关于用css实现文本和图片垂直水平居中   一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...

随机推荐

  1. 认识iOS系统架构

    关于本文: 文章主要介绍iOS系统架构中的四层结构的内容.常用的框架.大致的功能,然后对iOS开发人员的发展提出自己的一些拙见. 一.iOS系统是基于UNIX系统,所有从系统稳定性上来说的确比其他操作 ...

  2. Altium Designer中，将多个工程下的原理图和PCB合并在一起

    TDD双向放大器的设计分为三部分:LNA部分.PA部分和控制开关部分.为了调试方便,已经在三个Altium工程里面分别设计了三部分.现在需要合并成一个板子,为了保留已有的布局布线的工作量,采用这个办法 ...

  3. c++ char* 与LPCTSTR相互转化

    ] = "wo shi ni baba"; , , ch, -, NULL, ); wchar_t *wide = new wchar_t[num]; MultiByteToWid ...

  4. JS链接转换为二维码

    这里用到一个JQ插件 qrcode.js   下载地址https://github.com/jeromeetienne/jquery-qrcode 先引入 <script src="j ...

  5. 【Go语言系列】2.1、Go语言基本程序结构：注释

    注释在程序中的作用是对程序进行注解和说明,便于对源码的阅读.在源码中适当地添加注释,能够提高源码的可读性. Go语言的注释主要分成两类,分别是单行注释和多行注释. 单行注释: //单行注释 多行注释: ...

  6. JavaWeb开发：从购买服务器到简单demo运行

    写这篇文章的目的: 一个是为了记录实施过程,方便自己日后查阅: 另一个是给项目组成员提供一个参考,方便他们以后搭建自己的项目环境: 当然若能帮助到更多的朋友,那就再好不过了:D 需要注意: 我本身也是 ...

  7. scikit_learn (sklearn)库中NearestNeighbors（最近邻）函数的各参数说明

    NearestNeighbors(n_neighbors=5, radius=1.0, algorithm='auto', leaf_size=30, metric='minkowski', p=2, ...

  8. 使用总结：java多线程总结 <转载>

    转载 https://www.cnblogs.com/rollenholt/archive/2011/08/28/2156357.html java多线程总结 2011-08-28 20:08  Ro ...

  9. CF755G PolandBall and Many Other Balls 题解

    从神 Karry 的题单过来的,然后自己瞎 yy 了一个方法,看题解区里没有,便来写一个题解 一个常数和复杂度都很大的题解 令 \(dp_{i,j}\) 为 在 \(i\) 个球中选 \(j\) 组的 ...

  10. 二十二 动态代理&解决网站的字符集编码问题

    设计模式: 软件开发过程中,遇到相似问题,将问题的解决方式抽取模型(套路) 单例,工厂,装饰者,适配器,动态代理 谷歌汽车场景: 谷歌汽车场景Car Interface Icar{  start  r ...