下面是我的代码,拇指Divs是从左边开始但是如何让它们集中化?
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
}
.thumbs {
float: left;
width: 100px;
height: 100px;
border: 0;
margin: 0 1em 1em 0;
}

<div class="thumbsPanel">
<div class="thumbs"><a href="1.html"><img src="1.jpg"></a></div>
<div class="thumbs"><a href="2.html"><img src="2.jpg"></a></div>
<div class="thumbs"><a href="3.html"><img src="3.jpg"></a></div>
</div>
&#13;
答案 0 :(得分:1)
如果你想把它们居中,那么浮动div的意义不大。而是使它们成为内联块元素并在父代上使用text-align:center:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbs {
display: inline-block;
width: 100px;
height: 100px;
border: 0;
margin: 0 1em 1em 0;
}
&#13;
<div class="thumbsPanel">
<div class="thumbs">
<a href="1.html">
<img src="1.jpg">
</a>
</div>
<div class="thumbs">
<a href="2.html">
<img src="2.jpg">
</a>
</div>
<div class="thumbs">
<a href="3.html">
<img src="3.jpg">
</a>
</div>
</div>
&#13;
答案 1 :(得分:1)
我最喜欢的方法是向父元素添加text-align: center;
,然后使用display: inline-block;
代替float: left;
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbs {
display: inline-block;
width: 100px;
height: 100px;
border: 0;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs"><a href="1.html"><img src="1.jpg"></a></div>
<div class="thumbs"><a href="2.html"><img src="2.jpg"></a></div>
<div class="thumbs"><a href="3.html"><img src="3.jpg"></a></div>
</div>
答案 2 :(得分:0)
你可以使用内联块来拇指而不是像左边一样漂浮:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbs {
display: inline-block;
border:1px solid #000;
width: 100px;
height: 100px;
margin: 0 1em 1em 0;
}
&#13;
<div class="thumbsPanel">
<div class="thumbs"><a href="1.html">a</a></div>
<div class="thumbs"><a href="2.html">b</a></div>
<div class="thumbs"><a href="3.html">c</a></div>
</div>
&#13;
如果你想保存你的浮动行为,你应该在你的拇指上添加一个容器,同时使用float也不要忘记清除容器,如:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbsWrap {
display: inline-block;
overflow: hidden;
}
.thumbs {
float: left;
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 0 1em 1em 0;
}
&#13;
<div class="thumbsPanel">
<div class="thumbsWrap">
<div class="thumbs"><a href="1.html">a</a></div>
<div class="thumbs"><a href="2.html">b</a></div>
<div class="thumbs"><a href="3.html">c</a></div>
</div>
</div>
&#13;