web-dev-qa-db-fra.com

Vuetify - Centrer le contenu dans v-list-tile-content

J'essaie de centrer le contenu dans un v-list-tile-content d'un v-list sans succès. J'ai essayé d'appliquer text-xs-center, justification-center à l'élément v-list et à v-list-tile-content et cela ne fonctionne pas. J'ai également essayé de mettre un div à l'intérieur de v-list-tile-content et d'appliquer les classes mentionnées précédemment. J'ai trouvé que l'élément v-list-tile-content a un align-items: flex-start et si je le supprime, il applique automatiquement les classes.

Pour autant que je sache, align-items c'est pour l'alignement vertical et pour l'alignement horizontal la bonne classe est justifie-items, ai-je raison?

<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>
vue.jsvuetify.js
4
SiliconMachine

Cela devrait fonctionner pour

v-list-item-component

pour centrer un composant dans un v-list-item dans les versions vuetify> 2 comme indiqué sur justifier le contenu avec vuetify flex

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

v-list-tile-content a flex-direction: column

Cela signifie que vous devez définir align-items: center pour centrer horizontalement le contenu.

0
fabruex