Vuetify中的BootstrapVue b-form-checkbox&radio垂直中心？

Question

我使用 Vuetify 作为我们的主要框架，并添加了一些 Bootstrap-Vue 组件，例如 b-form-checkbox&radio。

我正在尝试弄清楚如何将 bootstrap-vue 复选框和文本垂直居中。 到目前为止，我已经尝试过::

1. vertical-align="baseline"
2. align="center"
3. justify="center" // 我知道它是横向的，但是……我已经尝试过了
4. class="align-middle"

我的框架结构是

    <v-container>
      <v-card>
        <v-card-text>
          <v-row>
            <v-col>
              <b-form-checkbox>
                ABCD
              </b-form-checkbox>
   ....
    </v-container>

我尝试将它们添加到 v-col、v-row 和 b-form-checkbox 中，并用 span 包裹复选框并添加到 span 中，但它们都不起作用。

请帮忙！

Answer 1

我想这就是你要找的东西：

https://codesandbox.io/s/quizzical-roentgen-hb2i5?fontsize=14&hidenavigation=1&theme=dark

诀窍是你必须在任何包含你想要垂直居中的组件的元素上将position 设置为relative。然后在垂直居中的组件上，您实际上是说，“将此组件的顶部放在其父组件的一半位置，然后将其向上移动其高度的一半”

在vue组件样式的vertCenterContentContainer类和vertCenteredContent类中可以看到。

突出的部分是：

.vertCenterContentContainer{
  ...
  position: relative;
}

.vertCenteredContent{
  position:relative;
  top: 50%;
  transform: translateY(-50%);
  ...
}

希望这会有所帮助！