一直以来，大家都知道，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. [.net 面向对象编程基础] (19) LINQ基础

    [.net 面向对象编程基础] (19)  LINQ基础 上两节我们介绍了.net的数组.集合和泛型.我们说到,数组是从以前编程语言延伸过来的一种引用类型,采用事先定义长度分配存储区域的方式.而集合是 ...

  2. 【译】用jQuery 处理XML-- jQuery与XML

    用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML ...

  3. Atititi.名字 姓名 name 起名naming spec 的构成结构规范v2 qc2.docx

    Atititi.名字 姓名 name 起名naming spec 的构成结构规范v2 qc2.docx 1.1. 职业名 官职等 amir 阿米尔 放前面1 1.2. 本名1 1.3. 父名,祖名,一 ...

  4. IDE：Eclipse查看Servlet源码

    一.源码下载 1.打开tomcat官网:http://tomcat.apache.org/    , 点击右侧下载菜单(以tomcat-7为例)进入下载页面:http://tomcat.apache. ...

  5. 【原创】NIO框架入门(四)：Android与MINA2、Netty4的跨平台UDP双向通信实战

    概述 本文演示的是一个Android客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo. 当前由于NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能. ...

  6. Java-集合=第五题 （Map）设计Account 对象如下： private long id; private double balance; private String password; 要求完善设计，使得该Account 对象能够自动分配id。 给定一个List 如下： List list = new ArrayList(); list.add(new A

    第五题 (Map)设计Account 对象如下: private long id; private double balance; private String password; 要求完善设计,使得 ...

  7. -bash: /usr/local/bin/react-native: No such file or directory

    执行react-native run-android/run-ios的时候出现 -bash: /usr/local/bin/react-native: No such file or director ...

  8. angularJS之事件处理

    angularJS的事件不像js一样,会默认有冒泡和捕获,还有angularJS之间的同名控制器之间,也只是同名, 不会让他们关联起来,就是这个名字的控制器的数据的改变不会影响到另一个同名的控制器. ...

  9. Oracle 11g系列：数据库

    1.创建Oracle数据库 创建Oracle数据库的最常用工具为Database Configuration Assistant(数据库配置助手),依次选择[开始]|[所有程序]|[Oracle-Or ...

  10. JAVA实现Excel的读写--poi

    上一篇为大家介绍了通过xls.jar的方式生成Excel的方法,本篇就为大家再介绍一下通过poi方式实现Excel文件的读写操作,内容很简单,代码注释很清晰. 1.生成Excel文件: import ...