html - 如何使用 Bootstrap 将表单居中？

Question

我想将包含两个输入(用户名和密码)的表单居中:

<h2 align="center" >Authentication</h2>
<form method="post" action="/signin"  class="form-horizontal" role="form" align="center">
    <div class="form-group" align="center">
        <label class="control-label col-sm-2"  for="username">username<em>*</em></label>
        <div class="col-sm-6">
            <input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
        </div>
    </div>  
    <div class="form-group">
        <label class="control-label col-sm-2" for="password">password<em>*</em></label>
        <div class="col-sm-6">            
            <input type="password" name="password" id="password" required="true" class="form-control"/> 
        </div>
    </div>
    <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-8">  
            <input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
         </div>
     </div>     
</form>

但是当我运行页面时，表单不在页面的中央。我在 style.css 中添加了:

.form-horizontal{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

但这没有用。

Answer 1

要使 div 在页面上居中，您需要设置容器的宽度，然后对其应用 margin:0 auto;，它会在页面上左右居中。

.form-horizontal{
    display:block;
    width:50%;
    margin:0 auto;
}

如果你想让文本居中，只需将文本中心添加到文本所在的 div 的类中。Bootstrap 会完成剩下的工作。

编辑 1

<div class="contact-form">
    <h2 align="center" >Authentication</h2>
    <form method="post" action="/signin"  class="form-horizontal" role="form" align="center">
        <div class="form-group" align="center">
            <label class="control-label col-sm-2"  for="username">username<em>*</em></label>
            <div class="col-sm-6">
                <input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
            </div>
        </div>  
        <div class="form-group">
            <label class="control-label col-sm-2" for="password">password<em>*</em></label>
            <div class="col-sm-6">            
                <input type="password" name="password" id="password" required="true" class="form-control"/> 
            </div>
        </div>
        <div class="form-group"> 
            <div class="col-sm-offset-2 col-sm-8">  
                <input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
            </div>
        </div>     
    </form>
</div>