Html 如何对齐div'；当相邻div的大小为'时，s向中心移动；s溢出屏幕宽度

我的问题一定有点混乱，而且会有很多相关的问题。但我认为我的情况不同

请全屏运行代码，并将屏幕大小减小到大约，以便

• 每行两盒
• 每行一盒

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

正文{
背景色：#E9EAED；
}
.盒子{
位置：相对位置；
宽度：400px；
浮动：左；
边框：1px实心rgba（35173278,1）；
高度：120px；
背景色：白色；
光标：指针；
利润率：15px 15px 15px 15px；
}

方框1
方框2
方框3
方框4
方框5
方框6
方框7
方框8
方框9
方框10
方框11
方框12
方框13
方框14

添加到正文

body {
text-align: center;
}

并更改box类

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

---

无需更改任何宽度即可对齐所有内容的最简单方法。很高兴worked@Frutis您还应告知OP有关

text align:start

的浏览器支持和交叉浏览问题。据我所知，这只是一个实验性的API，缺乏浏览器支持…@MuhammadUsman umm对此不太了解，我认为

文本对齐

和

内联块

已经存在很长时间了。如果你认为这是一个大问题，那么告诉他。我也很乐意看一看。@Frutis我是关于

start

属性

text align

的值的。有关更多信息，请点击此链接@neo

text align

属性可以影响

inline

和

inline block

元素，但

block

元素不受此影响

float

css属性也使元素

block

。因此，它们不会受到

文本对齐

的影响，我们需要使它们

内联块

，以便它们可以

左

、

右

或

中心

对齐。。。