一直以来，大家都知道，DIV容器内设置 text-align:center 即可让图片居中，但是DIV内默认的图片是上对齐，不会上下居中，如果想要实现这样的效果，JS判断是比较麻烦的，因为DIV容器内的图片高度是不一定的，那么只有用table了，我想大多数人事不愿意这么做的，那么怎么办呢，还是用CSS控制下吧
     其实早就在找这样的代码，今天终于自己试着写了一份出来，屌丝们可以自己分析下原理，其实很简单
     如果你之前也不会，那么希望对你有所帮助

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>纯css实现div容器内图片上下左右居中效果-柯乐义</title>

 <style type="text/css">

 *{ margin:0; padding:0; list-style:none;}

 img{ border:none;}

 .main{ width:600px; height:400px; margin:100px auto;text-align:center;vertical-align:middle;display:block;position:relative; background:#ddd;}

 .main a{display:table-cell;vertical-align:middle;width:600px; height:400px; }

 .main a img{max-width:600px;max-height:400px; }

 </style>

 </head>

 <body>

 <div class="main">

 <a href="http://keleyi.com/a/bjac/wynnj5xc.htm" target="_blank"><img src="http://keleyi.com/keleyi/phtml/picnext/images/k06.jpg" alt="柯乐义" /></a>

 </div>

 </body>

 </html>

兼容IE8，火狐，Chrome，Opera等浏览器

http://www.cnblogs.com/sosoft/

原文和效果： http://keleyi.com/a/bjad/fc6fwm34.htm

只用CSS实现容器内图片上下左右居中的更多相关文章

  1. css：子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

  2. css全局定位内容图片自动居中

    最近在做一个资讯站点时候,因为采集的数据,图片不居中,导致界面很不美观,所以需要全局定义下图片输出时候进行居中. .content img { max-width:800px;_width:expre ...

  3. css div图片上下左右居中

    <style type="text/css"> div{border:1px solid #ccc;height:500pc;width:500px;text-alig ...

  4. css练习-容器内多元素水平居中-flexbox布局应用

    想要实现这样一个父元素中的子元素都是居中的 只需在父元素上加样式 {display: flex;flex-direction: column;align-items:center;} 设置为flexb ...

  5. 记录利用CSS完美解决前端图片变形问题

    在头条IT学堂看到CSS完美解决前端图片变形问题的文章,就记录分享下: 一.让图片的宽度或者高度等于容器的宽度或高度,多余的裁掉,然后让图片居中: <style type="text/ ...

  6. Wordpress文章图片不居中与开头缩进问题

    //段落开头缩进 .Mid2L_con p {text-indent:2em;} //文章内图片不居中(设置居中后) .Mid2L_con .aligncenter { display: block; ...

  7. 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式！

    块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...

  8. 如何只用CSS做到完全居中

    我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中--直到现在.但是,请注意!想让元素绝对居中,只需要声明元素高度,并且附加以下样式, ...

  9. 只用CSS做到完全居中

    我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中……直到现在.但是,请注意!想让元素绝对居中,只需要声明元素高度,并且附加以下样式, ...

随机推荐

  1. Java提高篇（三三）-----Map总结

    在前面LZ详细介绍了HashMap.HashTable.TreeMap的实现方法,从数据结构.实现原理.源码分析三个方面进行阐述,对这个三个类应该有了比较清晰的了解,下面LZ就Map做一个简单的总结. ...

  2. python sorted排序

    python sorted排序 Python不仅提供了list.sort()方法来实现列表的排序,而且提供了内建sorted()函数来实现对复杂列表的排序以及按照字典的key和value进行排序. s ...

  3. [ZigBee] 2、 ZigBee开发环境搭建

    本节介绍ZigBee基本开发环境搭建,附件中有本节介绍的软件下载地址~ 链接:http://pan.baidu.com/s/1bLdqxg 1.IAR Embedded Workbench 的安装 S ...

  4. IOS 基础-define、const、extern、全局变量

    这里介绍一下define.const.extern的用法.优劣以及要注意的地方. 1.define 宏define是定义一个变量,没有类型信息.define定义的常量在内存中有若干个拷贝. defin ...

  5. Java-继承，多态练习0922-03

    编写一个Java应用程序,该程序包括3个类:Monkey类.People类和主类 E.要求: (1) Monkey类中有个构造方法:Monkey (String s),并且有个public void ...

  6. PDO预处理

    方法:bool PDOStatement::execute ([ array $input_parameters ] ) 1.PDOStatement::execute不使用参数 01)单个绑定值(P ...

  7. Atitti 图像处理 图像混合 图像叠加 blend 原理与实现

    Atitti 图像处理 图像混合 图像叠加 blend 原理与实现 混合模式 编辑 本词条缺少信息栏,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 混合模式是图像处理技术中的一个技术名词,不 ...

  8. MySQL内核：InnoDB存储引擎 卷1

    MySQL内核:InnoDB存储引擎卷1(MySQL领域Oracle ACE专家力作,众多MySQL Oracle ACE力捧,深入MySQL数据库内核源码分析,InnoDB内核开发与优化必备宝典) ...

  9. 使用node+vue.js实现SPA应用，nodevue.jsspa应用

    使用node+vue.js实现SPA应用,nodevue.jsspa应用 http://www.bkjia.com/Javascript/1097617.html https://github.com ...

  10. dubbo+zookeeper简单环境搭建

    dubbo+zoopeeper例子 [TOC] 标签(空格分隔): 分布式 dubbo dubbo相关 dubbo是目前国内比较流行的一种分布式服务治理方案.还有一种就是esb了.一般采用的是基于Ap ...