Как центрировать все элементы в div с помощью Foundation - PullRequest
Новая
       14

Как центрировать все элементы в div с помощью Foundation

0 голосов
/ 26 апреля 2019

Мне нужно центрировать все элементы в div thresholds-container.Я использую CSS Framework 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>

Это технически центрирует все, что мне нужно, но я хотел бы знать, как на самом деле центрировать эти элементы без смещения самого левого элемента.

1 Ответ

1 голос
/ 17 мая 2019

Я полагаю, вы ищете .align-spaced или .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

...