是否有最佳方式垂直对齐我的内容?我有 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>
最佳答案
以下应该为您解决问题:
<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
对齐列中心的按钮。
关于twitter-bootstrap - BootstrapVue 垂直对齐内容的最佳方式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61505624/