css - 在 bootstrap 3 中居中表单

Question

我试图将内容置于 Bootstrap 的中心，我搜索并找到了解决方案，这对我不起作用，有人可以帮助我吗，

<style>
   .center{
      margin:0 auto;
   }
</style>

<div class="center">
  <form method="post" action="" enctype="multipart/form-data">
    <div class="row">
      <div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <label for="name">Book Name</label>
        <input type="text" name="name" class="form-control" id="name">
      </div>
    </div>
    <div class="row">
      <div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <label for="author_id">Author</label>
        <select name="author_id" class="form-control" id="author_id">
          <option value="author_id">Author</option>
        </select>
      </div>
    </div>
  </form>
</div>

Answer 1

为了使 .center div 以 margin: 0 auto; 为中心，它还需要设置一个 width 值。默认情况下，div 占据其容器宽度的 100%。如果 div 是 100% 宽，则它不能居中，因为它在技术上已经居中。你可以给 .center 一个宽度来解决这个问题......

.center {
    width: 400px;
    margin:0 auto;
}

虽然你可能不想要固定宽度，事实上我会说你绝对不想要考虑到你使用的是响应式模板...

更好的解决方案是让内容居中，而不是让 div 容器居中。

尝试将 text-align: center; 添加到 form-group 类，或者使用 text-align: center; 创建你自己的类> 并将类添加到对标签/输入进行分组的 HTML div。

.form-group {
    text-align: center;
}