BootstrapVue 垂直对齐内容的最佳方式？

Question

是否有垂直对齐我的内容的最佳方式？我有 3 个按钮，我想垂直对齐。

         <b-container>
            <b-row>
                <b-col><b-button class="main-navigation-button" variant="primary">Create</b-button></b-col>
                <b-col><b-button class="main-navigation-button" variant="primary">Search</b-button></b-col>
                <b-col><b-button class="main-navigation-button" variant="primary">Edit</b-button></b-col>
            </b-row>
        </b-container>

原文由 Rugo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

以下内容应该可以为您解决问题：

 <b-container>
  <b-row class="vh-100 text-center" align-v="center">
    <b-col><b-button class="main-navigation-button" variant="primary">Create</b-button></b-col>
    <b-col><b-button class="main-navigation-button" variant="primary">Search</b-button></b-col>
    <b-col><b-button class="main-navigation-button" variant="primary">Edit</b-button></b-col>
  </b-row>
</b-container>

类 vh-100 将行高设置为视口高度的 100%，我们将道具 align-v 设置为 center 垂直居中行）。类 text-center 将按钮对齐在列的中心。

原文由 Troy Morehouse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以像这样垂直对齐网格的元素：

 <b-row class="my-1">
  <b-col sm="3" align-self="center">
    123
  </b-col>
  <b-col sm="3" align-self="center">
    456
  </b-col>
</b-row>

对齐方式可以是 start 、 center 或 end 。

原文由 Dirk Richter 发布，翻译遵循 CC BY-SA 4.0 许可协议