多个DIV集中在一行中

时间:2015-03-02 16:41:40

标签: css

下面是我的代码,拇指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;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

如果你想把它们居中,那么浮动div的意义不大。而是使它们成为内联块元素并在父代上使用text-align:center:

&#13;
&#13;
.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;
&#13;
&#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)

你可以使用内联块来拇指而不是像左边一样漂浮:

&#13;
&#13;
.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;
&#13;
&#13;

如果你想保存你的浮动行为,你应该在你的拇指上添加一个容器,同时使用float也不要忘记清除容器,如:

&#13;
&#13;
.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;
&#13;
&#13;