html - 响应式div容器中的中心div框

我有1个Div，宽度为80％，我想在其中放置Box，但我希望它们每次都居中，并且与外部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>

我该如何解决这个问题？并使其宽度居中？

最佳答案

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

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

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

</div>

关于html - 响应式div容器中的中心div框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35902484/