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>

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%，我们将 prop 设置align-v为center（在行的中间垂直居中列）。Classtext-center将按钮对齐在列的中心。