Question

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

HTML

var file = $('#uploadFile')[0].files[0];
  var chunkSize = 1024 * 1024;
  var fileSize = file.size;
  var chunks = Math.ceil(file.size/chunkSize,chunkSize);
  var chunk = 0;

  console.log('file size..',fileSize);
  console.log('chunks...',chunks);

  while (chunk <= chunks) {
      var offset = chunk*chunkSize;
      console.log('current chunk..', chunk);
      console.log('offset...', chunk*chunkSize);
      console.log('file blob from offset...', offset)
      console.log(file.slice(offset,chunkSize));
      chunk++;
  }

CSS

<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>

Answer 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>

Answer 2

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

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

<强> jsBin demo

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

中心输入字段的形式

2 个答案: