保证金 0 自动不工作 Div CSS

Question

我目前正在尝试将 div 与其中的表单居中，但它似乎不想与 margin: 0 auto; 居中。我已经确保将 display: block; 添加到 div 但它仍然不起作用！

这是我的 HTML:

<div class="card form-card">
        <form class="formPassword" action="" method="post">
            <ul style="list-style-type:none;padding-top:50px;margin-left:-40px;">
                <li>
                    <input class="formInputPassword" type="password" name="current_password" placeholder="Current Password"><br><br><br><br>
                </li>
                <li>
                    <input class="formInputPassword" type="password" name="password" placeholder="New Password"><br><br>
                </li>
                <li>
                    <input class="formInputPassword" type="password" name="password_again" placeholder="Repeat Password"><br><br>
                </li>
                <li>
                    <input type="submit" class="btn btn-primary" value="Save"><br><br>
                </li>
            </ul>
        </form>
</div>

这是我的 CSS:

        .liInline{
            display:inline-block;
            list-style-type:none;
        }
        div.card{
            display:block;
        }
        .card{
            display:block;
            padding: 20px 25px 30px;
            margin: 0 auto 25px;
            width: auto;
        }
        .formInputPassword{
            width:370px;
            height:38px;
            font-size:1.6em;
            text-align:center;
        }

谢谢

Answer 1

方案一：

将 text-align: center; 给 div.card 将使您的表格居中..

div.card{
    display:block;
    text-align:center;
}

Working Fiddle

方案二：

margin:0 auto; 在父级 div 和固定宽度时有效。
就像这里我给表格固定宽度和 margin:0 自动。将使表单水平居中。

.formPassword{
      margin:0 auto;
       width:250px;
  }

Fiddle

方案三：

如果你不想给定宽度，那就用display:table

.formPassword {
    display: table;
    margin: 0 auto;
}

Fiddle

Answer 2

如果你想要表格居中，你可以text-align居中卡片class 比如

.card{
            display:block;
            padding: 20px 25px 30px;
            margin: 0px auto;

            background:gray;
            text-align:center;
        }

希望能帮到你。

保证金 0 自动不工作 Div CSS

Margin 0 Auto Not Working On Div CSS

html

css

margin