css 图片在div里居中
比如500*500的div我想插入一张400*400的图片，希望图片在div的中间。在图片的周围都和div有空隙...
比如500*500的div我想插入一张400*400的图片，希望图片在div的中间 。在图片的周围都和div有空隙
展开
6个回答
展开全部
LZ元旦快乐啊.....
LZ真有心，在元旦居然问如此复杂的问题。不过LZ问到了，我就说一种我个人用的方法。
水平居中很简单，垂直居中就很困难，网上方法很多，不过都存在这样那样的兼容性问题，要么就要引入一些其他元素。考虑到后期图片自动缩放，外容器浮动等等因素，然后只利用代码，不引入其他元素。于是我在网上思路的基础上，自己写了下面的方法。
CSS部分：
*{padding:0px;margin:0px;}
.conn{width:500px;height:500px;border:1px solid #000;text-align:center;}/*好懂吧，宽高定义，文本居中。*/
.imgmid{display:inline-block;*display:inline;*zoom:1;height:100%;width:1px;margin-left:-1px;vertical-align:middle}/*这个LZ自己研究研究，我定义了一个高100%的块元素用来对齐img*/
.conn img{width:400px;height:400px;vertical-align:middle;}/*好懂吧，img元素宽高，然后垂直居中对齐。*/
html部分：
<div class="conn"><img src="2301idjiofsnlkwjie.jpg_min.jpg"><span class="imgmid"></span></div>
LZ真有心，在元旦居然问如此复杂的问题。不过LZ问到了，我就说一种我个人用的方法。
水平居中很简单，垂直居中就很困难，网上方法很多，不过都存在这样那样的兼容性问题，要么就要引入一些其他元素。考虑到后期图片自动缩放，外容器浮动等等因素，然后只利用代码，不引入其他元素。于是我在网上思路的基础上，自己写了下面的方法。
CSS部分：
*{padding:0px;margin:0px;}
.conn{width:500px;height:500px;border:1px solid #000;text-align:center;}/*好懂吧，宽高定义，文本居中。*/
.imgmid{display:inline-block;*display:inline;*zoom:1;height:100%;width:1px;margin-left:-1px;vertical-align:middle}/*这个LZ自己研究研究，我定义了一个高100%的块元素用来对齐img*/
.conn img{width:400px;height:400px;vertical-align:middle;}/*好懂吧，img元素宽高，然后垂直居中对齐。*/
html部分：
<div class="conn"><img src="2301idjiofsnlkwjie.jpg_min.jpg"><span class="imgmid"></span></div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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=gb2312" />
<title>test.html</title>
</head>
<style>
.div_01{
width:500px;
height:500px;
border:1px solid green;
margin:0 auto;
text-align:center;
}
.div_01 img{
width:400px;
height:400px;
border:1px solid blue;
margin:0 auto;
vertical-align:middle;
margin-top:48px;
}
</style>
<body>
<div class="div_01">
<img src="http://www.baidu.com/img/baidu_logo.gif"/>
</div>
</body>
</html>
我测试了，在IE6,7,8,火狐，360浏览器，谷歌浏览器下都正常
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test.html</title>
</head>
<style>
.div_01{
width:500px;
height:500px;
border:1px solid green;
margin:0 auto;
text-align:center;
}
.div_01 img{
width:400px;
height:400px;
border:1px solid blue;
margin:0 auto;
vertical-align:middle;
margin-top:48px;
}
</style>
<body>
<div class="div_01">
<img src="http://www.baidu.com/img/baidu_logo.gif"/>
</div>
</body>
</html>
我测试了，在IE6,7,8,火狐，360浏览器，谷歌浏览器下都正常
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div style="width:500px; text-align:center"><img src="11.jpg" width="400" height="400" style="margin:50px auto" /></div>
在IE 和 FF 中都居中
在IE 和 FF 中都居中
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div style="width:500px; height:500px;">
<img style="width:400px; height:400px; border:0; margin:50px;" src="..." />
</div>
<img style="width:400px; height:400px; border:0; margin:50px;" src="..." />
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div style="width:400px;height:400px;padding:50px;"><img...></div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
