对齐列表中心，而列表中的项目在d-FLEX向左浮动(Align list center while

我试图让这提醒有水平的5卡作为它可以容纳电网在线列表。问题是，如果我漂浮列表项至左，文本中心不再起作用，并在列表本身是左对齐。

这是我在装入用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和浮动列表项列表向左？任何帮助深表感谢。

要居中的整个布局，并保留最后一排左对齐，在列表的末尾使用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的方式居中整个布局，并保持一致的，无论项目与视口宽度的数量最后一排左侧。