响应div容器

Question

我有1个Div，宽度为80％，我希望盒子里面有盒子，但我希望它们每次都居中，并且无关紧要外部div的宽度。

.kachel_wrapper {
	margin: auto auto;
	width:80%;
	background:orange;
	min-height:450px;
	margin-top:70px;
}

.kachel {
	height:180px;
	width:180px;
	margin-top:20px;
	float:left;
	margin: auto auto;
	margin-top:15px;
	margin-left:10px;
	background:#6e7176;
	}

<div class="kachel_wrapper">
<div class="kachel"></div>
<div class="kachel"></div>
<div class="kachel"></div>

</div>

我该如何解决这个问题？让它们以宽度为中心？

Answer 1

只需显示.kachel div inline-block并将.kachel_wrapper设为text-align:center;：

＆＃13;

＆＃13;

.kachel_wrapper {
  margin: auto auto;
  width: 80%;
  background: orange;
  min-height: 450px;
  margin-top: 70px;
  text-align: center;
}
.kachel {
  height: 180px;
  width: 180px;
  margin-top: 20px;
  margin-top: 15px;
  margin-left: 10px;
  background: #6e7176;
  display: inline-block;
}

＆＃13;

<div class="kachel_wrapper">
  <div class="kachel"></div>
  <div class="kachel"></div>
  <div class="kachel"></div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不确定您是否希望div垂直或水平居中。如果你想让它们水平居中，请使用@Jacob Gray的答案。如果您希望它们垂直居中，请从float: left;移除.kachel并添加display: block;，然后添加margin-left: auto;和margin-right: auto;：

＆＃13;

＆＃13;

.kachel_wrapper {
  margin: auto auto;
  width: 80%;
  background: orange;
  min-height: 450px;
  margin-top: 70px;
}

.kachel {
  display: block;
  height: 180px;
  width: 180px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  margin-bottom: 10px;
  background: #6e7176;
}

＆＃13;

<div class="kachel_wrapper">
  <div class="kachel"></div>
  <div class="kachel"></div>
  <div class="kachel"></div>

</div>

＆＃13;

＆＃13;

＆＃13;