61,112
社区成员
发帖
与我相关
我的任务
分享如何让DIV里面的一行多张图片水平居中
.div p {
text-align:left;
}
.div img {
display:block;
margin:0 auto;
}
来设置文字水平居左，图片水平居中，但是当我想一行放2张图片并且居中就实现不了了，因为我用了display:block一行只能放一张图片。改如何修改CSS才能实现图片既水平居中又可以一行放多张图片。
text-align:left;
}
.div img {
display:block;
margin:0 auto;
}
来设置文字水平居左，图片水平居中，但是当我想一行放2张图片并且居中就实现不了了，因为我用了display:block一行只能放一张图片。改如何修改CSS才能实现图片既水平居中又可以一行放多张图片。
...全文
请发表友善的回复…
发表回复
natici 2010-07-19
- 打赏
- 举报
.div{
text-align:center;
}
.div p {
text-align:left;
}
hlq_zist 2010-07-19
- 打赏
- 举报
这样写是不是更好一些？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>image.div</title>
<style type="text/css">
#container{border:3px solid blue;width:800px;text-align:center;vertical-align:middle;}
#container image{border:1px solid blue;}
#container div{float:left;}
</style>
</head>
<body>
<div id="container">
<div id="inner">文字描述文字描述文字描述</div>
<img src="javascript:;" width="80" height="60" alt="Image From KunLun" />
<img src="javascript:;" width="80" height="60" alt="Image From KunLun" />
<img src="javascript:;" width="80" height="60" alt="Image From KunLun" />
<img src="javascript:;" width="80" height="60" alt="Image From KunLun" />
</div>
<div id="extra">
<img src="javascript:;" width="80" height="60" alt="Image From KunLun" />
</div>
</body>
</html>
ywqxtx 2010-07-15
- 打赏
- 举报
而且用了float:left，图片就不会居中显示了
ywqxtx 2010-07-15
- 打赏
- 举报
楼上的如果用了float:left，那文字和图片排版就有问题了哦！
bo523 2010-07-15
- 打赏
- 举报
.div img{float:left;}
