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

Question

我试图居中里面的内容V-列表瓦片内容一个的V-名单没有成功。我尝试将 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>

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>

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