html - 如何使用 Foundation 使 div 中的所有元素居中

Question

我需要将所有元素置于 div thresholds-container 的中心。我正在使用 CSS 框架基础，但似乎无法弄清楚如何做到这一点。我不需要它们垂直居中，只需在 div 内水平排列并居中即可。

<div class="row" id="filters-container">
    <div class="row" id="thresholds-container">
        <h2 class="small-2 columns">Priority Thresholds:</h2>
        <span data-has-options="icon--circle" class="icon--circle circle--accent3 icon-md icon-caret_double_up small-1 columns" id="high-priority-icon"></span>
        <p class="small-2 columns" id="doh-high-priority">More than {{ dohHighPriority }} Days on Hand</p>
        <span data-has-options="icon--circle" class="icon--circle circle--brand2 icon-md icon-caret_double_down small-1 columns" id="high-priority-icon"></span>
        <p class="small-2 columns" id="doh-low-priority">Less than {{ dohLowPriority }} Days on Hand</p>
    </div>
</div>

我尝试过为所有元素分配 margin: 0 auto，但没有成功。元素留在原地。

我已经尝试将 small-centered 分配给每个元素，但这样会使每个元素居中并垂直堆叠。

我只想在最左边和最右边的元素上留出均匀的空间。我该怎么做？

编辑:我暂时做的是在最左边的元素上使用 offset 来“居中”所有元素，但我觉得必须有更好的方法。

<h2 class="large-2 columns large-offset-2">Priority Thresholds:</h2>

这在技术上使我需要的一切都居中，但我想知道如何在不偏移最左边的元素的情况下实际居中这些元素。

Answer 1

我相信您正在寻找.align-spaced or .align-justify取决于您是想要外层空间还是只是元素之间的间距。

https://foundation.zurb.com/sites/docs/flexbox-utilities.html#horizontal-alignment

另见 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container