时间戳

首页 > 解决方案 > Vuetify中的BootstrapVue b-form-checkbox&radio垂直中心？

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

问题描述

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

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

  1. 垂直对齐=“基线”
  2. 对齐=“中心”
  3. justify="center" // 我知道它是水平的，但是……我已经试过了
  4. 类=“对齐中间”

我的框架结构是

    <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 中，但它们都不起作用。

请帮忙！

标签： cssvue.jsbootstrap-4vuetify.jsbootstrap-vue

解决方案

我想这就是你要找的：

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

诀窍是你必须在任何包含你想要垂直居中的组件的元素上设置position为。relative然后在你垂直居中的组件上，你基本上说，“把这个组件的顶部放在它的父组件的中间，然后将它向上移动它的一半高度”

可以在vue组件样式中的vertCenterContentContainerclass和class中看到。vertCenteredContent

突出的部分是：

.vertCenterContentContainer{
  ...
  position: relative;
}

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

希望这可以帮助！

推荐阅读