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

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

1 个答案: