使用 Vuetify 将标签中的内容居中答案

【问题标题】：Center content in tabs with Vuetify使用 Vuetify 将标签中的内容居中
【发布时间】：2020-08-18 15:27:35
【问题描述】：

我有 v-tabs 来显示时间。单击箭头后，我想将时间居中。

但它不起作用。在下图中，我们可以看到时间没有对齐中心。是否有一些 css 可以应用在上面？

<v-card
  class="mt-1 ml-1 mr-1 mb-0"
  v-if="item.vagas.length"
>
<v-tabs
    dark
    background-color="teal darken-3"
    show-arrows="always"
    center-active
    centered
    height="30"
    v-model="tabHora"
>
 <v-tabs-slider color="teal lighten-3"></v-tabs-slider>
 <v-tab
  v-for="ob in item.vagas"
  :key="ob.id"
  @click="horaClicked(item, horario, ob)"
 >
  {{ ob.hora }}
 </v-tab>
</v-tabs>
</v-card>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

在我回答之前，顺便说一句，您的代码中有一个错误 - show-arrows="always" 应该是 show-arrows。现在来看看我用Vuetify.js 和他们的v-tab 组件测试过的东西......

试用结果：

所以我尝试了多种fixed-tabs/grow/css 宽度，应用v-flex/v-layouts 来控制标签大小和对齐中心...没有成功。我似乎无法始终如一地控制v-tab 组件及其center-active 属性的行为方式，尤其是当浏览器大小从xl 变为xs（即桌面变为移动）时。因此，对于您想要实现的目标，我建议您采用不同的方法，您可以针对不同的浏览器尺寸进行一致的控制。

建议（如果坚持使用导航箭头设计）：

如果这是您所坚持的设计，Vuetify 不会轻易让您实现这一目标。 Vuetify 在移动到移动视图时依赖于项目/对象的分组。对于这种设计，我建议您使用类似下面的代码 sn-p 的东西。需要注意的是，您必须对 V 形按钮进行编码（使用 @click）才能选择不同的时间。您也可以申请transitions 来制作时代变化的动画。

      <v-card flat dark>
        <v-layout row wrap align-center>
          <v-flex xs12 text-xs-center align-self-center>
            <v-card-text>
              <v-layout row align-center>
                <v-flex>
                  <v-btn
                    flat
                    icon
                    dark
                    color="success"
                  >
                    <v-icon>chevron_left</v-icon>
                  </v-btn>
                </v-flex>

                <v-flex>
                  <div class="title font-weight-light">
                    {{ testValue }}
                  </div>
                </v-flex>

                <v-flex>
                  <v-btn
                    flat
                    icon
                    dark
                    color="success"
                  >
                    <v-icon>chevron_right</v-icon>
                  </v-btn>
                </v-flex>
              </v-layout>
            </v-card-text>
          </v-flex>
        </v-layout>
      </v-card>

建议（如果设计灵活）：

如果您希望继续使用 Vuetify 的标准组件，您可能不得不采用他们使用组的方法，并且可能探索不同的组件，例如 button groups 或 slide groups（滚动到底部以查看居中的活动项） .

【讨论】：