如何让Bootstrap 3中动态生成的箭头按钮与多选列表垂直居中？

Hey, I’ve dealt with this exact layout issue using Bootstrap 3 and Gentella before—let’s get those arrow buttons aligned perfectly vertically with your multi-select boxes. Here are two reliable approaches that play nicely with the template’s existing styles:

Approach 1: Table-Based Layout (Full Bootstrap 3 Compatibility) #

This method uses table display properties, which work seamlessly across all browsers supported by Bootstrap 3:

1. First, add a custom class to your middle column (the one holding the buttons):

<div class="col-md-2 col-sm-2 col-xs-2 col-lg-2 vertical-center-col">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">
      <button type="button" class="btn btn-primary"><i class="fa fa-arrow-right"></i></button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">
      <button type="button" class="btn btn-primary"><i class="fa fa-arrow-left"></i></button>
    </div>
  </div>
</div>

2. Add this custom CSS to your stylesheet (or <style> tag):

/* Make the column act like a table to enable vertical centering */
.vertical-center-col {
  display: table;
  height: 100%;
}

/* Convert rows to table cells and center their content vertically */
.vertical-center-col > .row {
  display: table-cell;
  vertical-align: middle;
  float: none; /* Override Bootstrap's float to keep table layout working */
}

/* Add consistent spacing between the two buttons (replace the old margin-top:20%) */
.vertical-center-col > .row:last-child {
  margin-top: 15px;
}

This will make the entire button group sit perfectly in the middle of the column, matching the height of your multi-select boxes.

Approach 2: Flexbox (Modern Browser-Friendly) #

If you don’t need to support older browsers (like IE9), flexbox is a cleaner solution:

1. Simplify your middle column’s HTML by removing the nested rows and using a vertical button group:

<div class="col-md-2 col-sm-2 col-xs-2 col-lg-2 flex-center-col">
  <div class="btn-group-vertical" style="width: 100%;">
    <button type="button" class="btn btn-primary"><i class="fa fa-arrow-right"></i></button>
    <button type="button" class="btn btn-primary" style="margin-top: 15px;"><i class="fa fa-arrow-left"></i></button>
  </div>
</div>

2. Add this CSS:

.flex-center-col {
  display: flex;
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
  height: 100%;
}

/* Ensure the parent row has height so flexbox can work its magic */
.row {
  position: relative;
  height: 100%;
}

This approach keeps your markup cleaner and the centering logic straightforward.

Quick Tips #

• Make sure the parent .row (the one wrapping the two multi-selects and button column) has enough height—you can add min-height: 160px; (adjust based on your multi-select size) to guarantee the centering is visible.
• Double-check Gentella’s default styles to ensure there’s no conflicting float or position rules on your columns—these can break vertical centering.

内容的提问来源于stack exchange，提问作者aarelovich