CSS:如何水平对div进行溢出:auto，其中包含浮动左元素。

Question

目前，我有一个div具有溢出自动，其中包含浮动左元素，如您在下面的代码中所看到的(我正在使用最新的引导程序对我的页面进行样式设置)。我的问题是，我如何水平中心的div？

代码：

<div class="overflow-auto">
    <div class="card float-left mx-2 my-4 shadow" style="width: 250px;">...</div>
    <div class="card float-left mx-2 my-4 shadow" style="width: 250px;">...</div>
    <div class="card float-left mx-2 my-4 shadow" style="width: 250px;">...</div>
    <div class="card float-left mx-2 my-4 shadow" style="width: 250px;">...</div>
    <div class="card float-left mx-2 my-4 shadow" style="width: 250px;">...</div>
</div>

输出：

​

​

Answer 1

正如Jacob提到的，使用引导flex要容易得多，我能够在下面的代码中实现我想要的结果。

解决方案：

<div class="d-flex justify-content-center flex-wrap">
    <div class="card mx-2 my-4 shadow" style="width: 250px;">...</div>
    <div class="card mx-2 my-4 shadow" style="width: 250px;">...</div>
    <div class="card mx-2 my-4 shadow" style="width: 250px;">...</div>
    <div class="card mx-2 my-4 shadow" style="width: 250px;">...</div>
    <div class="card mx-2 my-4 shadow" style="width: 250px;">...</div>
</div>