列表项在d-flex中向左浮动时对齐列表中心 [英] Align list center while list items are floated left in d-flex

问题描述

我正在尝试创建一个内联列表，以提醒网格水平放置的网格，并尽可能容纳卡片.问题是，如果我将列表项浮动到左侧，则文本中心将不再起作用，并且列表本身将保持对齐状态.

I am trying to make inline list which reminds grid that has horizontally as may cards as it can hold. The problem is that If I float list items to left, the text-center no longer works and the list itself is left aligned.

这是我正在使用ajax .load()

This is the card I am loading into the list item using 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>

这是相同的，但最后一项不会向左浮动，而是列表居中:

This is the same but last items are not floated left but list is centered:

<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中将列表居中并向左浮动列表项?非常感谢您的帮助.

So the question is how to center list inside d-flex and float list items to left? Any help is much appreciated.

推荐答案

要居中整个布局并使最后一行保持对齐，请在列表末尾使用4个空的spacer元素.在这种情况下，由于一排最多只能有5个垫片，因此您需要正好有4个垫片.

To center the entire layout, and keep the last row left aligned, use 4 empty spacer elements at the end of the list. In this case you need exactly 4 spacers since the max you have across a row is 5....

此外，请确保您使用的是flexbox，而不是浮动的.

Also, make sure you're using flexbox, and not floats.

<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 居中整个布局的方法，无论项目数量和视口宽度如何，都保持最后一行对齐.

AFAIK is the only flexbox way to center the entire layout, and keep the last row left aligned regardless of number of items and viewport width.

这篇关于列表项在d-flex中向左浮动时对齐列表中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！