Question

我试图将Bootstrap行中存在的4个div垂直居中。这是我的基本代码：

<div class="row">
     <div class="col-md-3"><button type="button" style="float:right; height: 40px;">Contact</button></div>
     <div class="col-md-3">Activity 1</div>
     <div class="col-md-3">Activity 2</div>
     <div class="col-md-3">Activity 3</div>
</div>

所以，我不能使用Flexbox，因为我需要在中间屏幕上保持行右侧的按钮而 justify-self：flex-end 不足以使按钮保持打开状态排的权利。我也不能用代码末尾的按钮移动行，因为我需要先将它保留在移动设备中。我还尝试使用 display：table 和 display：table-cell ，但它仍无效。

有人有想法吗？

Answer 1

你可以使用flexbox并利用order属性将第一个按钮推到行的右侧，然后 flexbox可以将内容集中在一起每个div。

在移动设备尺寸下，您可以使用媒体查询覆盖订单属性。

＆＃13;

.row {
  display: flex;
}

.col-md-3 {
  display: flex;
  align-items:center; /* vertical center */

  }

.last {
  order:2;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
     <div class="col-md-3 last"><button  type="button">Contact</button></div>
     <div class="col-md-3">Activity 1</div>
     <div class="col-md-3">Activity 2</div>
     <div class="col-md-3">Activity 3</div>
</div>
</div>

＆＃13;

Answer 2

尝试将行显示为flex，删除按钮右侧的浮动。最简单的方法是使用justify-content: space-between;并在</row>之前设置按钮。然后，使用align-items: center。

Answer 3

尝试指定类，如下所示，这有助于您的解决方案。

.col-md-3 ~ .col-md-3
{display:table-cell;}

CSS - 无法垂直居中

3 个答案: