我这里有一个有趣的问题。
我在同一页面上有两个表单，完全相同的代码复制和粘贴。每个表单都有一个隐藏的输入，用于标识后端的表单，每个表单都有一个<input type="submit">用于提交。
两者之间的唯一区别是第一种形式少了<input type="text">。
问题是，包含3个<input type="text">字段的表单居中，而2 <input type="text">的表单则没有。当我添加第三个<input type="text">时，表单会居中。
似乎表单必须有一定数量的输入才能使其居中。
这是JSFiddle
确保拉伸浏览器，以便在顶部窗体的右侧看到空白。
我的HTML ......
<div class="content-area">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Email</div>
<form id="changeEmailForm" method="post" action="/resources/submit.php">
<div class="input-group text-center">
<input type="hidden" name="changeEmail"> <!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">
<input class="form-control input-lg" id="confirmEmail" name="confirmEmail" minlength="2" type="text" required placeholder="Confirm Email">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Password</div>
<form id="changePasswordForm" method="post" action="/resources/submit.php">
<div class="input-group text-center">
<input type="hidden" name="changePassword"> <!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="currentPassword" name="currentPassword" minlength="2" type="text" required placeholder="Current Password">
<input class="form-control input-lg" id="newPassword" name="newPassword" minlength="2" type="text" required placeholder="New Password">
<input class="form-control input-lg" id="confirmPassword" name="confirmPassword" minlength="2" type="text" required placeholder="Confirm Password">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
这是更新的Fiddle
将文字中心更改为center-block会使元素居中。我把它添加到第二个，因为它也不是一个真正的中心。
<div class="content-area">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Email</div>
<form id="changeEmailForm" method="post" action="/resources/submit.php">
<div class="input-group center-block">
<input type="hidden" name="changeEmail">
<!-- Hidden input to identify the form -->
<!--<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">-->
<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">
<input class="form-control input-lg" id="confirmEmail" name="confirmEmail" minlength="2" type="text" required placeholder="Confirm Email">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Password</div>
<form id="changePasswordForm" method="post" action="/resources/submit.php">
<div class="input-group center-block">
<input type="hidden" name="changePassword">
<!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="currentPassword" name="currentPassword" minlength="2" type="text" required placeholder="Current Password">
<input class="form-control input-lg" id="newPassword" name="newPassword" minlength="2" type="text" required placeholder="New Password">
<input class="form-control input-lg" id="confirmPassword" name="confirmPassword" minlength="2" type="text" required placeholder="Confirm Password">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>