vue.js - 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>

Answer 1

因为我想使用 Vuetify native 类，但它们没有 !important 并且 v-list 的 align-items: start 覆盖了我的 aling-center，我只是添加了一个内联样式如下:

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

这就是我一直在寻找的解决方案。希望对您有所帮助。