封装器中的包装器将位于5的div置于中心位置

Question

我想创建一个音板，我连续有5个按钮。如果屏幕变小，则切换到下一行，但所有按钮都在middel中心。

这是代码。我已经创建了一个H：100％和W：100％的按钮包装器，并将div放在另一个包装器的中间，但这样做才能正常工作。

.wrapper{
	width: 90%;
	max-width: 1200px;
	height:100%;
	background-color:red;
	margin: auto;
}

.buttonwrapper{
	width:100%;
	height:100%;
	background-color:red;
}

.button{
	width: 150px;
	height:100px;
	background-color:black;
	margin: 10px 10px;
	float:left;
}

<div class="wrapper">
		<div class="buttonwrapper">
			<div class="button"></div>
			<div class="button"></div>
			<div class="button"></div>
			<div class="button"></div>
			<div class="button"></div>
			<div class="button"></div>
			<div class="button"></div>
		</div>
	</div>

Answer 1

您可以像这样使用text-align: center;和display: inline-block;。

＆＃13;

＆＃13;

.wrapper{
	width: 90%;
	max-width: 1200px;
	height:100%;
	background-color:red;
	margin: auto;
    text-align: center;
}

.buttonwrapper{
	width:100%;
	height:100%;
	background-color:red;
    display: inline-block;
}

.button{
	width: 150px;
	height:100px;
	background-color:black;
	margin: 10px 10px;
	display: inline-block;
}

＆＃13;

<div class="wrapper">
		<div class="buttonwrapper">
			<div class="button"></div>
			<div class="button"></div>
			<div class="button"></div>
			<div class="button"></div>
			<div class="button"></div>
			<div class="button"></div>
			<div class="button"></div>
		</div>
	</div>

＆＃13;

＆＃13;

＆＃13;