div+css的使用，图片在div中置底，除空隙

最新推荐文章于 2021-08-03 18:25:07 发布

afterrains

最新推荐文章于 2021-08-03 18:25:07 发布

阅读量9.3k

点赞数

分类专栏： html+css+div

本文链接：https://blog.csdn.net/happy_jijiawei/article/details/40862627

版权

html+css+div 专栏收录该内容

78 篇文章 2 订阅

订阅专栏

</div>

++++++++++++++++++++++++++++++++++++++++++

有些时候图片下面会有空隙

解决方法：

1,把图片的边距设为0,如:img{margin:0;padding:0;}
2,在你插图片的div样式里加上这句:font-size:0px;一般问题都出在这,在有的浏览器下默认是有字体大小的

+++++++++++++++++++++++++++++++++++++++++++++

图片在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=utf-8" />
<title>无标题文档</title>
<style type="text/css">

.justify{
width:400px;
border:solid 2px red;
background:#FFFFCC;
padding:10px;

text-align:justify;
text-justify :distribute-all-lines;
}

</style>
</head>
<body>
<div class="justify">
<img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />
<img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />
<img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />
</div>
</body>
</html>

+++++++++++++++++++++++++++++++++++++++++++++++++++

在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=utf-8" />
<title>无标题文档</title>

<style type="text/css">

#picbox{width:400px; height:300px; text-align:center; line-height:300px; border:1px #000 solid;}
#picbox span{
display:inline-block;
}
#picbox img{vertical-align:middle;}

</style>
</head>
<body>

<div id="picbox">
<span> </span><img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />
<img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />
<img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />
</div>
</body>
</html>

看最新电影

www.palmdy.com