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

Question

我需要将 div thresholds-container 中的所有元素居中。我正在使用 CSS 框架 Foundation，但似乎无法弄清楚如何执行此操作。我不需要它们垂直居中，只需要在 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 分配给每个元素，但这样会使每个元素居中并垂直堆叠。

我只想在最左边和最右边的元素上使用偶数的 space。我该怎么做？

编辑：我暂时所做的是在最左边的元素上使用 offset 到 "center" 所有这些，但我觉得必须有更好的方法。

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

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

Answer 1

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

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

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

How to center all elements in a div with Foundation

html

css

centering

zurb-foundation