如何在同级宽度不等的水平布局中将中间项居中？

维护具有不同同级宽度的中间项目的中心对齐

此问题解决了在水平布局中将中间项目居中的挑战其侧面物品的宽度可能会有所不同。期望的效果是确保即使侧面项目大小不等，中间项目也保持居中。

为了实现这一点，采用了嵌套弹性盒方法。以下 CSS 规则构成了该解决方案的核心：

.container {
    display: flex;
}

.box {
    flex: 1;
    display: flex;
    justify-content: center;
}

.box:first-child > div { margin-right: auto; }

.box:last-child > div { margin-left: auto; }

在容器内，每个盒子的 flex 值为 1，确保它们按比例共享可用空间。然后，每个框都显示为带有 justify-content: center 的弹性容器，以将其内容居中。

对于第一个框，使用 margin-right: auto 将右边距应用于其子元素，反之亦然，使用 margin-left: auto 将左边距应用于最后一个框的子元素。这使得边距自动增长，将内容推到各自的边缘，有效地将中间框对齐在中心。

这个解决方案达到了预期的效果，确保中间项保持居中，无论其宽度如何兄弟盒子。它是一个纯 CSS 解决方案，不需要额外的脚本或绝对定位。

以上是如何在同级宽度不等的水平布局中将中间项居中？的详细内容。更多信息请关注PHP中文网其他相关文章！