一直以来，大家都知道，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 面向对象编程基础] (14) 重构

    [.net 面向对象编程基础] (14) 重构 通过面向对象三大特性:封装.继承.多态的学习,可以说我们已经掌握了面向对象的核心.接下来的学习就是如何让我们的代码更优雅.更高效.更易读.更易维护.当然 ...

  2. IO完成端口

    从MSDN中翻译了IO完成端口的文章,不得不说翻译的很烂,英语需要继续提高啊... 在一个多处理器系统上,IO完成端口提供一个非常高效的线程模型来处理多个异步IO请求.当一个进程创建了一个IO完成端口 ...

  3. sizeof && strlen 的区别

    本文主要记录了 sizeof 操作符 和 strlen() 函数的区别,以及各自的用途.(在下才疏学浅,发现错误,还请留言指正) sizeof 和 strlen 的区别 示例代码如下: #includ ...

  4. 杂谈X509证书, Java Keystore与Jetty

    很多人对JSSE组成部分的Key Tool 工具不太明白,希望本文能有帮助 科班出身的同学应该学过课程“密码学”, 这门课详细解释了现代对称加密的算法原理, 当时学的我云里雾里. 直到现在使用过SSL ...

  5. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  6. 浅谈iOS版本号

    作者:Travis FIR.im 一直在尽量兼容不同使用习惯的版本号形式, 但是在使用中我们发现好多开发者对怎么更好的用版本号来标示应用很陌生. 这是篇基础文章, 简单介绍 iOS 的版本号. 名词解 ...

  7. salesforce 零基础学习（三十七） DML及Database方法简单描述

    在apex中通过soql查询可以使用两种方式,使用DML语句或者使用Database的方法. 使用DML语句和使用Database类的方法对于我们来说用的都很多,并且都很常见.对于数据库常见的操作:增 ...

  8. iOS ---Extension编程指南

    当iOS 8.0和OS X v10.10发布后,一个全新的概念出现在我们眼前,那就是应用扩展.顾名思义,应用扩展允许开发者扩展应用的自定义功能和内容,能够让用户在使用其他app时使用该项功能.你可以开 ...

  9. angular利用ui-router登录检查

    angular利用ui-router登录检查 SAP都会有这个问题,session过期或者页面被刷新的情况下应该进入登录页. 监听ui-router的satte事件可以实现当state切换的时候检查登 ...

  10. CCNA网络工程师学习进程（5）路由器和交换机的登录安全配置和vlan划分

        本节详细介绍路由器和交换机的登录安全配置以及VLAN划分的原理.     (1)登录安全配置: 路由器登录有两种验证方式:有本地验证方式和远程验证方式.本地登录验证方式可以配置用户名和密码也可 ...