如何让加了float:left的div居中？

Ixs3n7c 2014-07-09 11:52:52

<div class="div_1">
<div style="float:left">图像1</div>
<div style="float:left">图像2</div>
<div style="float:left">图像3</div>
</div>

让div_1下面的图像居中，我想的办法是在div_1的外面再加一个div，然后让div_1居中
<div class="div_out">
<div class="div_1">
<div style="float:left">图像1</div>
<div style="float:left">图像2</div>
<div style="float:left">图像3</div>
</div>
</div>

.div_out{text-align:center;}

但是，如果图像数量不固定那么div_1的宽度要随着图像div的数量而决定也就无法使用这种方法了。。。

有除了js以外的方法吗？

...全文

6910 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

Yvonnebai 2014-07-17

打赏
举报

margin:0 auto

叶落无痕0826 2014-07-15

打赏
举报

div_1的margin:0 auto，这样试试！

弘毅致远 2014-07-14

打赏
举报

紫紫紫紫紫紫紫紫紫紫紫紫霞 2014-07-11

打赏
举报

<div class="div_out" style="text-align: center;"> <div class="div_1" style="display: inline-block;"> <div style="float:left;width: 50px;">图像1</div> <div style="float:left;width: 50px;">图像2</div> <div style="float:left;width: 50px;">图像3</div> <div style="float:left;width: 50px;">图像3</div> <div style="float:left;width: 50px;">图像3</div> <div style="float:left;width: 50px;">图像3</div> </div> </div> 这样就可以了我加了宽度是为了模仿img在里面的效果

皓月长空 2014-07-10

打赏
举报

关于图片位置调整还是用绝对定位来处理比较好，漂浮在精确位置处理很差的

张运领 2014-07-09

打赏
举报

不要这样搞吧，float的本意就是为了让他们向边上靠齐的显示，你这里既然想要居中，干嘛还要使用float？而且，过度的使用float并不好的。

KK3K2005 2014-07-09

打赏
举报

书香卷气 2014-07-09

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
<!--
*{margin:0;padding:0;}
div{width:800px;border:solid 1px #000;padding:20px;margin:30px auto;text-align:center;}
p{display:inline-block;width:150px;height:150px;margin:10px;background:gray;color:#fff;}
-->
</style>
</head>

<body>

<div>
	<p>左边左边</p>
	<p>右边右边</p>
</div>
</body>
</html>

豪情 2014-07-09

打赏
举报


<style type="text/css">
    .div1{width: 1000px; height: 500px; border: 1px solid #000;}
    .div2{width: 300px; height: 200px; margin: 0 auto; background: red; float: left; position: relative; left: 50%; margin-left: -150px;}
</style>
    <div class="div1">
        <div class="div2"></div>
    </div>