一直以来，大家都知道，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. 可伸缩性最佳实践：来自eBay的经验

    看到一篇关于系统可伸缩性(可扩展)的文章,eBay的架构师Randy Shoup写的,原文出处没找到,就不写转载的地址了.根据自己的理解对文章有修改剪切的地方. 在eBay,可伸缩性是我们每天奋力抵抗 ...

  2. MySQL账户安全设置

    一般来说,安装完MySQL后,默认的用户是root,密码123456,外网不能访问. 有时候也希望在外网访问,则可以添加一个账户.建议不要用root. 如下表,存在安全问题: mysql> se ...

  3. Kafka入门初探+伪集群部署

    Kafka是目前非常流行的消息队列中间件,常用于做普通的消息队列.网站的活性数据分析(PV.流量.点击量等).日志的搜集(对接大数据存储引擎做离线分析). 全部内容来自网络,可信度有待考证!如有问题, ...

  4. Atitit attilax总结的对于attilax重要的jsr规范，以及需要增加的jsr规范

    Atitit attilax总结的对于attilax重要的jsr规范,以及需要增加的jsr规范 需要增加的jsr规范1 开发常用的10个规范(jsp etc)1 other开发常用的50个规范1 需要 ...

  5. 可能是一场很 IN 的技术分享

    从去年的 Swift 到今年的 iOS 9,每一个新的技术.新的设备都"紧紧牵动 iOS 开发者的心". 好在有这样一群开发者,他们乐于第一时间尝试.挑战并分享. 有一类开发者他们 ...

  6. Hadoop学习笔记【Hadoop家族成员概述】

    Hadoop家族成员概述 一.Hadoop简介 1.1 什么是Hadoop? Hadoop是一个分布式系统基础架构,由Apache基金会所开发,目前Yahoo!是其最重要的贡献者. Hadoop实现了 ...

  7. 如何使用ITEXTSHARP将HTML代码字符串写进PDF

    原文 如何使用ITEXTSHARP将HTML代码字符串写进PDF itextsharp包括一个简单的类,可以用来根据html代码或字符串创建pdf文件.使用此类,你可以使用短短几行代码,就将 HTML ...

  8. Unity5.x在WP8.1中无法使用Reflection API的解决方法

    下班前随便写点,虽然花了不少时间但是最终得到的解决方法还是比较简单的. 第一种方法:使用WinRTLegacy.dll中的类.这个dll在生成的WP project中是自带的无需在unity工程中添加 ...

  9. 最简单的可取消多选效果(以从水果篮中挑选水果为例)【jsDEMO】

    [功能说明] 最简单的可取消多选效果(以从水果篮中挑选水果为例) [html代码说明] <div class="box" id="box"> < ...

  10. poj1062昂贵的聘礼（Dijkstra**）

    /* 题意: 物主有一个物品,价值为P,地位为L, 以及一系列的替代品Ti和该替代品所对应的"优惠"Vi g[u][i] 表示的是u物品被i物品替换后的优惠价格!(u>0, ...