Question

<div class="home__buttons">
  <div class="col-md-6 col-md-offset-3">
    <div class="buttons">
      <div class="col-md-6">
        <div class="displayButton">
          <label>{{'step4_text_button1' | translate}} </label>
        </div>
      </div>
      <div class="col-md-6">
        <div class="displayButton">
          <label>{{'step4_text_button2' | translate}} </label>
        </div>
      </div>
    </div>
  </div>
</div>

现在这是水平对齐的，我也尝试使用position：absolute通过垂直中心对齐它，但是此规则破坏了引导程序样式。

我也尝试过flex：

.home__buttons {
    display: flex;
    align-content: center;
    align-items: center;
}

Answer 1

您可以尝试使用

.home_buttons
{
vertical-align:middle;
}

Answer 2

您需要纠正一些事情：

.home__buttons类应具有以下属性：

.home__buttons {
display: flex;
justify-content: center;
align-items: center;

}

该类应添加到列单元格中，而不是父div中。

<div class="col-md-6 home__buttons">

标签的引导程序中的默认边距底部为底部，您可以通过在<label>标签上应用m-0类来将其删除。
```
<label class="m-0">
```

链接到JS Fiddle（我使用边框清楚地看到了布局）：https://jsfiddle.net/srijan1709/nhfyx6ge/13/

如何通过垂直中心对中？

2 个答案: