Html 带css的居中框-对齐错误

我在使用css创建居中框时遇到问题。现在我有这个：

正如您所看到的，当您更改页面宽度（调整浏览器大小或更改分辨率）时，每行的框数正在更改。没关系，但是盒子应该在中间对齐，而不是在左边，就像现在一样。

我希望你能理解问题所在。这是一个简单的草图，你可以把它形象化

---

谢谢

使用

显示

代替

浮动

：

.trex-new-widget-container .trex-box {
    border: 1px solid #000;
    box-shadow: 2px 1px 1px 1px #ccc;
    cursor: pointer;
    display: inline-block;
    height: 180px;
    margin: 3px;
    overflow: hidden;
    position: relative;
    width: 240px;
}

---

为什么要使用如此复杂的HTML代码？你可以让它更干净。你有什么想法或建议如何简化HTML代码吗？你使用了这么多div，而你只需使用

ul

li

就可以简化它。就是这样！谢谢Alex

.trex-new-widget-container .trex-box {
    border: 1px solid #000;
    box-shadow: 2px 1px 1px 1px #ccc;
    cursor: pointer;
    display: inline-block;
    height: 180px;
    margin: 3px;
    overflow: hidden;
    position: relative;
    width: 240px;
}

.trex-new-widget-container .trex-box {
    border: 1px solid #000;
    box-shadow: 2px 1px 1px 1px #ccc;
    cursor: pointer;
    display: inline-block;
    /*float: left;*/
    height: 180px;
    margin: 3px;
    overflow: hidden;
    position: relative;
    width: 240px;
}