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

【问题标题】：How to center all elements in a div with Foundation如何使用 Foundation 将 div 中的所有元素居中
【发布时间】：2019-05-17 10:46:11
【问题描述】：

我需要将 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 分配给每个元素，但这会将每个元素居中并垂直堆叠。

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

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

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

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

【问题讨论】：

标签： html css zurb-foundation centering