Question

我尝试center-align我使用Bootstrap创建的表单，但margin:0 auto或offset不起作用。我还不熟悉前端开发和Bootstrap，所以这可能是一个简单的错误。这是下面的代码。感谢一些帮助

＆＃13;

html,
body,
header,
#intro {
  height: 100%;
}

#intro {
  background: url("../img/back.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- full screen background -->
<div id="intro" class="view">
  <div class="full-bg-img">
    <!-- login form -->
    <div class="container">
      <div class="col-lg-4"></div>
      <div class="col-lg-4">
        <div class="jumbotron" style="margin-top:150px;">
          <form>
            <div class="form-group">
              <input type="email" class="form-control" placeholder="Enter Your Username">
            </div>
            <div class="form-group">
              <input type="password" class="form-control" placeholder="Enter Your Password">
            </div>
            <div class="checkbox">
              <label>
                         <input type="checkbox">Remember Me
                         </label>
              <button type="submit" class="btn btn-primary form-control"> Login </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

由于您希望将表单置于中心位置，因此我创建了一个center_div类。

  margin: 0 auto;
  width: 80%

希望它能实现你所需要的。请随意在评论部分提出任何问题。

＆＃13;

html,
body,
header,
#intro {
  height: 100%;
}

#intro {
  background: url("../img/back.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.center_div {
  margin: 0 auto;
  width: 80%
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- full screen background -->
<div id="intro" class="view">
  <div class="full-bg-img">
    <!-- login form -->
    <div class="container center_div">
      <div class="col-lg-4"></div>
      <div class="col-lg-4">
        <div class="jumbotron" style="margin-top:150px;">
          <form>
            <div class="form-group">
              <input type="email" class="form-control" placeholder="Enter Your Username">
            </div>
            <div class="form-group">
              <input type="password" class="form-control" placeholder="Enter Your Password">
            </div>
            <div class="checkbox">
              <label>
                     <input type="checkbox">Remember Me
                     </label>
              <button type="submit" class="btn btn-primary form-control"> Login </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

html,
body,
header,
#intro {
  height: 100%;
}

#intro {
  background: url("../img/back.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);	
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */							
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- full screen background -->
<div id="intro" class="view">

  <!-- here you are ---------->
  <div class="full-bg-img center">
    <!-- login form -->
    <div class="container">
      <div class="col-lg-4"></div>
      <div class="col-lg-4">

        <!-- style="margin-top:150px;" die -->
        <div class="jumbotron"> 
          <form>
            <div class="form-group">
              <input type="email" class="form-control" placeholder="Enter Your Username">
            </div>
            <div class="form-group">
              <input type="password" class="form-control" placeholder="Enter Your Password">
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox">Remember Me
              </label>
              <button type="submit" class="btn btn-primary form-control"> Login </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap中心对齐不起作用

2 个答案: