保证金自动在浮动中不起作用 div

Question

我希望卡片 div 在容器 div 的中心对齐。但是..如你所见，并不像我想要的那样

有人能帮帮我吗？

如果按照html代码：

<div class="container">
    <div class="card">
        <div id="cart_image"></div>
        <div id="cart_author"></div>
        <div id="cart_desc"></div>
    </div>
</div>

和这个 css 代码：

<style>

    .container {
        width: 100%;
        background: silver;
        max-width: 1400px;
        margin: 0 auto;
    }

    .card {
        margin: 2px;
        width: 32%;
        height: 250px;
        background: black;
        box-sizing: border-box;
        float: left;
    }
</style>

Answer 1

在"container"class中添加如下CSS:

width: 100%; margin: 0px auto;

应该做。

Answer 2

您正在为 margin 使用 px，为 width 使用 %，您必须为两者都使用 %。

像这样更改卡片css：

.card {
  margin: 1%;
  width: 31.33%;
  height: 250px;
  background: black;
  box-sizing: border-box;
  float: left;
}

示例：https://jsfiddle.net/p14Ln2mv/

保证金自动在浮动中不起作用 div

Margin auto does not work in floating div

html

css

margin