Question

我目前正试图将一个div放在一个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

解决方案1：

将text-align: center;提交给div.card会使您的表单成为中心..

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

<强> Working Fiddle

解决方案2：

margin:0 auto;在父div和固定宽度时有效像这里我给形式固定宽度和边距：0自动。将形成水平中心。

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

<强> Fiddle

解决方案3：

如果您不想给出固定宽度，请使用display:table

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

<强> Fiddle

Answer 2

如果您希望表单位于中心，则可以在卡片类中对齐中心比如说。

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

            background:gray;
            text-align:center;
        }

希望能帮助你。

保证金0自动不工作Div CSS

2 个答案: