twitter-bootstrap - 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>

类(class) vh-100将行高设置为视口(viewport)高度的 100%，我们将属性设置为 align-v至 center (在行的中间垂直居中列)。类(class) text-center对齐列中心的按钮。