css - Bootstrap - 使子元素在 col-lg-4 类中水平对齐到中间

Question

我使用的是 Bootstrap 4.3.1 并使用 flex 进行页面布局。

<div class='row d-flex align-items-center'>
                <div class='col-lg-12'>
                    <div class="form-group row">
                        <div class="col-lg-2">
                            <label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
                        </div>
                        <div class="col-lg-10">
                            <select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

选择元素当前是水平顶部对齐的。如何设置选择元素在列中间水平对齐？

Answer 1

Bootstrap 4 中的

.row 有 display: flex 所以我们可以删除 d-flex。 .align-items-center 只会影响直接的 child 。

<div class='row'>
  <div class='col-lg-12'>
    <div class="form-group row align-items-center">
      <div class="col-lg-2">
        <label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
      </div>
      <div class="col-lg-10">
        <select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
        </select>
      </div>
    </div>
  </div>
</div>