Question

我的问题必须有点混乱，并且会有很多相关的问题。但我认为我的情况不同。

请全屏运行代码并将屏幕尺寸缩小到左右，以便

每行两盒
每行一盒

在这两种情况下，相邻盒子右边会有很多空的空间，我想要的是将盒子对准中心，并在出现这种情况时使右侧和左侧看起来相等。 它适用于两种情况（每行两盒，每行一盒）

＆＃13;

body{
background-color : #E9EAED;
}
.box{
	position: relative;
	width: 400px;
	float: left;
	border: 1px solid rgba(35, 173, 278, 1);
	height: 120px;
	background-color: white;  
	cursor: pointer;
	margin: 15px 15px 15px 15px;

}

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="box">box 1 </div>
<div class="box">box 2 </div>
<div class="box"> box 3</div>
<div class="box"> box 4</div>
<div class="box">box 5 </div>
<div class="box">box 6 </div>
<div class="box"> box 7</div>
<div class="box"> box 8</div>
<div class="box"> box 9</div>
<div class="box"> box 10</div>
<div class="box">box 11 </div>
<div class="box">box 12 </div>
<div class="box"> box 13</div>
<div class="box"> box 14</div>
</body>
</html>

＆＃13;

Answer 1

添加到正文

body {
text-align: center;
}

并更改框类

.box {
float: left; //remove this
display: inline-block; //add this
text-align: left; // that your text would be aligned normally again
}

当相邻div的大小溢出屏幕宽度时，如何将div对齐到中心

1 个答案: