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

Posted 2023-02-22

【中文标题】Vuetify中的BootstrapVue b-form-checkbox&radio垂直中心？

【英文标题】：BootstrapVue b-form-checkbox&radio vertical center in Vuetify?

【发布时间】：2020-03-30 23:47:15

【问题描述】：

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

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

vertical-align="baseline" align="center" justify="center" // 我知道它是横向的，但是……我已经尝试过了 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 中，但它们都不起作用。

请帮忙！

【问题讨论】：

是“ABCD”你想要垂直居中的元素吗？

复选框和“ABCD”。复选框本身不知何故 align="bottom" 而 abcd 不知何故 align="top" 这很奇怪，因为我根本没有设置任何对齐...它们是默认的

对，所以我会添加一个<div> 来包围<b-form-checkbox> 并将div 用作容器。然后根据我在回答中描述的内容在<b-form-checkbox>上设置样式。

您能否附上您当前结果的屏幕截图？

【参考方案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%);
  ...

希望这会有所帮助！

【讨论】：

好吧...它不起作用..它改变了位置不对齐...我已经尝试过您在此处写的内容，但对齐仍然相同...但谢谢帮助！

你确定所有的容器都是100%他们父母的高度吗？

是的！很抱歉回复晚了。我检查了 Bootstrap 论坛并发现它是 Bootstrap V4 的持续问题。他们将在明年（2020 年）用第 5 版修复它。github.com/bootstrap-vue/bootstrap-vue/issues/3745