6
votes

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

J'essaye de centrer le contenu à l'intérieur d'un contenu de tuile de v-list d'une v-list sans succès. J'ai essayé d'appliquer text-xs-center, justify-center à l'élément v-list et au v-list-tile-content et cela ne fonctionne pas. J'ai également essayé de mettre un div dans le contenu de la 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.

Autant que je sache, align-items c'est pour l'alignement vertical et pour l'alignement horizontal, la classe appropriée est justify-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.js vuetify.js

0 commentaires

5 Réponses :

0
votes

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

Cela signifie que vous devez définir align-items: center pour centrer horizontalement le contenu à l'intérieur.

0 commentaires

1
votes

Si vous utilisez toutes ces règles CSS sur l'un des exemples de codes de liste Vuetify , cela aligne le centre de texte de l'élément de liste. (Si vous n'avez pas de deuxième ligne , vous n'avez pas besoin de la partie flex-direction: row .)

.v-list__tile__content{
    justify-content: center!important;
    flex-direction: row!important;
    text-align: center!important;
    align-items: center!important;
}

.v-list__tile__title, .v-list__tile__sub-title {
    text-align: center!important;
}

2 commentaires

Cela a fonctionné pour moi mais uniquement pour le texte. Existe-t-il un moyen d'amener l'icône de flèche des listes imbriquées pour aligner également le centre?

il semble que le nom de la classe pour cela est .v-list__group__header__append-icon , ou la classe parente .v-list__group__header pourrait aider. Si cela ne fonctionne pas, essayez simplement de cliquer avec le bouton droit de la souris et d '«inspecter» tous les composants ici et de tester les règles CSS dans l'onglet Éléments de l'inspecteur Chrome?

4
votes

Comme je voulais utiliser les classes natives Vuetify mais qu'elles n'avaient pas les! Important et les align-items: le début de la v-list écrasait mon aling-center, j'ai juste ajouté un style en ligne comme suit:

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

C'était la solution que je recherchais. J'espère que cela aide.

0 commentaires

0
votes

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 justify content avec vuetify flex

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

0 commentaires

0
votes

{{ element.content }} dans <v-list-tile-content> c'est juste un texte, je suppose. Par conséquent, ajouter simplement class="text-center" devrait fonctionner. J'ai eu un problème très similaire avec <v-list-item-title> et <v-list-item-title class="text-center"> fait l'affaire.

0 commentaires