码迷,mamicode.com
首页 > Web开发 > 详细

css如何实现未知宽高div中图片垂直水平居中效果

时间:2016-01-19 01:41:13      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

css如何实现未知宽高div中图片垂直水平居中效果:
在有时候可能有这样的情况,那就是想让一个图片在div中实现垂直水平居中效果,但是有时候div的尺寸是位置的,下面通过代码实例介绍一下在这种情况下如何实现图片的垂直水平居中效果。
代码如下:
实例一:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#thediv{
  width:200px;
  height:200px;
  background:red;
  text-align:center;
  display:table-cell; 
  vertical-align:middle;
}
</style>
</head>
<body>
<div id="thediv"><img src="mytest/demo/1.jpg"></div>
</body>
</html>

上面你的代码可以让图片垂直水平居中,当然这里,div的尺寸是固定的,只是为了演示用的,未知尺寸也是可以实现垂直水平居中的,关键代码如下:

display:table-cell; 
vertical-align:middle;

代码存在一定的兼容问题,当然问题不大,因为IE7和IE6浏览器很快就被淘汰了.

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14774

更多内容可以参阅:http://www.softwhy.com/divcss/

css如何实现未知宽高div中图片垂直水平居中效果

标签:

原文地址:http://www.cnblogs.com/softwhy/p/5140907.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!