Question

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-sm-6"><div class="text-center"><a class="btn btn-default btn-lg" href="#" role="button">Sell</a></div></div>
        <div class="col-lg-4 col-sm-6"><div></div></div>
        <div class="col-lg-4 col-sm-12"><div class="text-center"><a class="btn btn-default btn-lg" href="#" role="button">Buy</a></div></div>
    </div>
</div>

好的，所以我想要彼此相邻的2个按钮，但是想要它们都在屏幕的中间（垂直）

Answer 1

嘿尝试将列文本左右对齐，如下所示：这将生成2列并将左列格式化为文本右侧，将右列格式化为文本左侧，这将它们组合在屏幕的中心：

<div class="container">
   <div class="row">
      <div class="col-xs-6 text-right">
         <a class="btn btn-default btn-lg" href="#" role="button">Sell</a>
      </div>
      <div class="col-xs-6 text-left">
          <a class="btn btn-default btn-lg" href="#" role="button">Buy</a>
      </div>
   </div>
</div>

Answer 2

从this参考，您可以查看：

<div class="outer">
  <div class="middle">
    <div class="inner">

      <a class="btn btn-default btn-lg" href="#" role="button">Sell</a>
      <a class="btn btn-default btn-lg" href="#" role="button">Buy</a>
    </div>
  </div>
</div>

CSS：

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    text-align:center;
    margin-left: auto;
    margin-right: auto; 
}

Codepen链接：http://codepen.io/anon/pen/zGmagX

垂直对齐行引导程序全页

2 个答案: