Vuetify - 在 v-list-tile-content 中居中内容

Question

我试图将内容集中在 v-list 的 v -list-tile-content 中，但没有成功。我尝试将 text-xs-center、justify-center 应用于 v-list 元素和 v-list-tile-content ，但它不起作用。我还尝试在 v-list-tile-content 中放置一个 div 并应用前面提到的类。我发现 v-list-tile-content 元素有一个 align-items: flex-start ，如果我删除它，它会自动应用这些类。

据我所知 align-items 它用于垂直对齐和水平对齐，正确的类是 justify-items，对吗？

 <v-list class="table pa-0">
    <v-list-tile
        v-for="(element, index) in elements"
        :key="`pricing_table_element_${index}`"
        :class="{'dark-background': index % 2 === 0}"
        avatar
    >
        <v-list-tile-avatar>
            <fa-icon
            icon="check-circle"
            color="#00BB9B"
            />
        </v-list-tile-avatar>

        <v-list-tile-content>
            {{ element.content }}
        </v-list-tile-content>

        <v-list-tile-action>
            <v-tooltip right>
                <fa-icon
                    slot="activator"
                    icon="info-circle"
                    color="#f68e28"
                />
                <span>{{ element.tooltip }}</span>
            </v-tooltip>
        </v-list-tile-action>
    </v-list-tile>
</v-list>

原文由 SiliconMachine 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

因为我想使用 Vuetify 本机类，但它们没有 !important 和 align-items: v-list 的开头 覆盖了我的 aling-center，所以我只是添加了一个内联样式，如下所示：

 <v-list-tile-content
  :style="{
    'align-items':'center'
  }"
>
  {{ element.content | capitalizeFirstLetter }}
</v-list-tile-content>

这是我正在寻找的解决方案。希望能帮助到你。

原文由 SiliconMachine 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这应该适用于

v-list-item-component

将组件置于 vuetify 版本 > 2 中的 v-list-item 中，如在 使用 vuetify flex 证明内容时 给出的那样

<v-list-tile-content
class="d-flex justify-center"
>
  {{ element.content }}

原文由 Rikkas 发布，翻译遵循 CC BY-SA 4.0 许可协议