一、原始的居中方法是把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. Java程序基本优化

    1.尽量指定类的final修饰符,因为带有final修饰符的类是不可派生的. 2.尽量重用对象. 3.尽量使用局部变量. 4.不要重复初始化变量. 5.在Java+Oracle的应用系统开发中,Jav ...

  2. Linux系统监控 zabbix-agent 主机添加的操作页面

    #!/bin/bash#设置解析#安装zabbix源.aliyun YUM源# rpm -ivh http://repo.zabbix.com/zabbix/4.0/rhel/7/x86_64/zab ...

  3. python学习第二课——while循环

    #while循环基础语句 while 1==1: print('OK') #死循环 #如何阻止死循环 count=0 while count<10: print('第'+(str)(count) ...

  4. Memcache和Redis的详细理解与区别

    1. Memcache Memcache是一个高性能,分布式内存对象缓存系统,通过在内存中缓存一个巨大的hash表,他能够存储包括图像,文件,索引,sql语句结果等数据,可以理解为它理解为一个为提升读 ...

  5. Linux CentOS7 VMware 文件和目录权限chmod、更改所有者和所属组chown、umask、隐藏权限lsattr/chattr

    一.文件和目录权限chmod u User,即文件或目录的拥有者:g Group,即文件或目录的所属群组:o Other,除了文件或目录拥有者或所属群组之外,其他用户皆属于这个范围:a All,即全部 ...

  6. C++ 标准模板库STL 队列 queue 使用方法与应用介绍

    C++ 标准模板库STL 队列 queue 使用方法与应用介绍 queue queue模板类的定义在<queue>头文件中. 与stack模板类很相似,queue模板类也需要两个模板参数, ...

  7. java web开发_购物车功能实现

    java web开发_购物车功能实现 之前没有接触过购物车的东东,也不知道购物车应该怎么做,所以在查询了很多资料,总结一下购物车的功能实现. 查询的资料,找到三种方法: 1.用cookie实现购物车: ...

  8. 生成MyEclipse6.5&7.5&8.5 注册机源码

    分类: java技术2010-09-30 21:46 26638人阅读 评论(6) 收藏 举报 myeclipsejavastringimportinputbyte 生成MyEclipse8.5注册码 ...

  9. 使用Spring JMS轻松实现异步消息传递

    异步进程通信是面向服务架构(SOA)一个重要的组成部分,因为企业里很多系统通信,特别是与外部组织间的通信,实质上都是异步的.Java消息服务(JMS)是用于编写使用异步消息传递的JEE应用程序的API ...

  10. NFS实战

    博客实践: (1) nfs server导出/data/application/web,在目录中提供wordpress; (2) nfs client挂载nfs server导出的文件系统至/var/ ...