Question

这是示例代码

<section class="col-md-12"> 
  <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 pull-right">
    <button ><a href="" class=" text-center">Test Btn</a></button>
  </div>
</section>

对于所有屏幕，是否可以将垂直对齐设置为中间按钮？我目前在媒体查询中使用margin-top来做到这一点，但它太多了＃34;编码，只是要求任何更简单的想法？

TNX， P

Answer 1

这是你想要的解决方案吗？

http://output.jsbin.com/solomikebe

基本上，这是代码

.parent {
  height: 200px;
  background-color: red;
  display: flex;
  flex-direction: row;
  align-items: center;
}

容器div有parent类。

Answer 2

.align-self-center将起作用。

例如

<section class="col-md-12 align-self-center"> 
</section>

div内部的Bootstrap垂直对齐按钮

2 个答案: