多个DIV集中在一行中

Question

下面是我的代码，拇指Divs是从左边开始但是如何让它们集中化？

＆＃13;

＆＃13;

.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;
	
}

＆＃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;

Answer 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;

Answer 2

我最喜欢的方法是向父元素添加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>

Answer 3

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

＆＃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;