Выровнять центр списка, пока элементы списка перемещаются влево в d-flex

Question

Я пытаюсь сделать встроенный список, который напоминает сетку, которая имеет горизонтально, как и карты, которые могут вместить.Проблема в том, что если я перемещаю элементы списка влево, текстовый центр больше не работает, а сам список выравнивается по левому краю.

Это карта, которую я загружаю в элемент списка, используя ajax .load()

<div class="my-card" style="width: 268px;">
    <a href="" class="card-text">
        <img class="card-img-top" src="http://placehold.it/268x280" alt="">
        <div class="card-body py-3 px-0">
            <div>Dolor labore duis eu eu qui officia aliqua minim.</div>
        </div>
    </a>
</div>

<div class="container-fluid">
        <div class="row">
            <div class="d-flex text-center">
                <ul class="list-inline">
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                </ul>
            </div>
        </div>
    </div>

Это то же самое, но последние элементы не плавают слева, а список центрирован:

<div class="container-fluid">
        <div class="row">
            <div class="d-flex">
                <ul class="list-inline text-center pl-3 justify-content-start">
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                </ul>
            </div>
        </div>
    </div>

Итак, вопрос в том, как центрировать список внутри элементов d-flex и плавающего списка слева?Любая помощь очень ценится.

Answer 1

Чтобы отцентрировать весь макет и сохранить выравнивание последней строки влево, используйте 4 пустых элемента распорки в конце списка.В этом случае вам нужно ровно 4 проставки, так как максимальное значение, которое у вас есть в ряду, равно 5 ....

Кроме того, убедитесь, что вы используете flexbox, а не с плавающей точкой.

<div class="container-fluid">
    <ul class="row list-unstyled mx-auto text-center justify-content-center">
        <li class="col-auto">
            <div class="my-card" style="width: 268px;">
                <a href="" class="card-text">
                    <img class="card-img-top" src="http://placehold.it/268x280" alt="">
                    <div class="card-body py-3 px-0">
                        <div>Dolor labore duis eu eu qui officia aliqua minim.</div>
                    </div>
                </a>
            </div>
        </li>
        ... (more cards)

        <!-- 4 empty spacers at end for left justify cards on all viewports -->
        <li class="col-auto">
            <div class="my-card invisible" style="width: 268px;"></div>
        </li>
        <li class="col-auto">
            <div class="my-card invisible" style="width: 268px;"></div>
        </li>
        <li class="col-auto">
            <div class="my-card invisible" style="width: 268px;"></div>
        </li>
        <li class="col-auto">
            <div class="my-card invisible" style="width: 268px;"></div>
        </li>
    </ul>
</div>

https://www.codeply.com/go/jPsNgz6Co8

AFAIK - единственный flexbox способ центрировать весь макет и сохранять выравнивание последней строки влево независимо от количества элементов и ширины области просмотра.