在 Bootstrap 3 中的两个堆叠选择之间垂直对齐一组按钮

Question

我正在使用 Bootstrap 3 模式实现角色权限分配屏幕。 Please, see a demo of current state 全屏显示，因此选择不会堆叠在彼此下方，而是在一边对齐。如您所见，现在按钮粘在顶部，但我想将它们放在模态中心的一个列中：

代码很琐碎，详情check plunkr：

<div class="modal-header">
  <h3 class="modal-title">Role permissions</h3>
</div>
<div class="modal-body">
  <div class="row">
    <div class="col-md-5 form-group">
      <label for="availablePermission">
        Available permissions
      </label>
      <select id="availablePermission" class="form-control" size="14">
        <optgroup label="General">
          <option value="0">Change password</option>
          ...
        </optgroup>
      </select>
    </div>
    <div class="col-md-2">
      <button class="btn btn-primary">
        <i class="fa fa-fw fa-angle-right"></i>
      </button>
      <button class="btn btn-primary">
        <i class="fa fa-fw fa-angle-left"></i>
      </button>
    </div>
    <div class="col-md-5 form-group">
      <label for="existingPermission">
        Assigned permissions
      </label>
      <select id="existingPermission" class="form-control" size="14">
        <optgroup label="General">
          <option value="1">View users</option>
          ...
        </optgroup>
      </select>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-primary">OK</button>
  <button class="btn btn-warning">Cancel</button>
</div>

我已经尝试使用带有display: flex 和flex-direction: column 的中间列的flexbox，但是按钮没有移动一个像素。 display: table-cell 和 vertical-align: middle 也不起作用。是否可以在不使用硬编码尺寸的情况下将它们漂亮地居中？

Answer 1

设法让它与 flexbox 一起工作，虽然失去了一点适应性：尝试改变宽度 - 选择现在不会垂直堆叠:(添加一个@media 查询（类似于那个对于 Bootstrap 的 *-md) 将解决此问题。

  @media (min-width: 992px) {
    .flex-row {
      display: flex; 
    }
  }

  .flex-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
  }

Plunkr

Answer 2

由于您可能知道 2 个按钮的高度，您可以这样做：

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: THEWIDTHpx;
height: THEHEIGHTpx;

您还需要将position: relative; 放在行中。这将使带有 2 个按钮的框完美地位于行的中间。

如果您使用浮动将 div 彼此相邻放置，请确保该行有一个 clearfix。