垂直对齐块引导程序

Question

我有两个按钮：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="main">
                <button class="btn-primary btn-lg center-block ">Sign in </button><br> 
                <button class="btn-primary btn-lg  center-block">Sign up </button> 
            </div>
        </div>
    </div>
</div>

如何进行垂直对齐？我希望按钮位于中心位置。

我尝试使用margin-top：50％，但它对我不起作用。

Answer 1

如果您只是将它们放在页面的中心，那么您不需要行/列设置，但如果您确实需要，请将.main div放在您的行周围/列。

注意：我会将btn-block用于您的按钮，您也不需要center-block。

参见示例片段。

无行/列示例

＆＃13;

＆＃13;

.main {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="main">
  <button class="btn-primary btn-lg btn-block">Sign in</button>
  <br>
  <button class="btn-primary btn-lg btn-block">Sign up</button>
</div>

＆＃13;

＆＃13;

＆＃13;

使用行/列示例

＆＃13;

＆＃13;

.main {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="main">
    <div class="row">
      <div class="col-lg-12">
        <button class="btn-primary btn-lg btn-block">Sign in</button>
        <br>
        <button class="btn-primary btn-lg btn-block">Sign up</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;