在表单中居中输入字段答案

【问题标题】：Center input fields in form在表单中居中输入字段
【发布时间】：2015-12-30 03:03:51
【问题描述】：

我有一个位于页面中心的登录表单。 FORM 已经以正确的大小放置在正确的位置。但是，这两个输入向左对齐，我希望它们居中。以下代码不起作用。有什么想法吗？

HTML

<div class="col-sm-4 col-sm-offset-4">
      <form action="/new" method="POST">
        <input class="loginField" type="text" name="email" placeholder="Email address"></input>
        <input class="loginField" type="text" name="password" placeholder="Password"></input>
      </form>
    </div>

CSS

.loginField {
  margin: 0 auto;
  width: 500px;
  height: 50px;
}

【问题讨论】：

标签： html css forms twitter-bootstrap

【解决方案1】：

您应该使用form-control 类来更改Bootstrap 输入的默认行为。

*我更改了您的 HTML，因此它首先是移动的，如果您不需要，这不会影响文本居中。

body {
  padding-top: 50px;
}
#loginForm {
  max-width: 500px;
  margin: 0 auto;
}
#loginForm .form-control {
  position: relative;
  height: 50px;
  font-size: 16px;
  text-align: center;
  border-radius: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form id="loginForm">
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
  </form>
</div>
<!-- /container -->
<hr>

【讨论】：

【解决方案2】：

在您的表单中添加class="text-center"

<form class="text-center" action="/new" method="POST">

jsBin demo

从逻辑上讲，如果您不希望所有表单的文本居中，请将您的输入包装在 a 中，即：<div> 并将类添加到该 DIV。

【讨论】：