Vuetify - Center content in v-list-tile-content

Question

I am trying to center the content inside a v-list-tile-content of a v-list without success. I've tried to apply text-xs-center, justify-center to the v-list element and the v-list-tile-content and it does not work. Also I've tried to put a div inside the v-list-tile-content and apply the previously mentioned classes. I've found that the v-list-tile-content element has a align-items: flex-start and if I delete that it automatically apply the classes.

As far as I know align-items it's for vertical alignment and for horizontal alignment the proper class is justify-items, am I right?

<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

As I wanted to use the Vuetify native classes but they had not the !important and the align-items: start of the v-list was overwriting my aling-center, I just added an inline style as follows:

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

This was the solution that I was searching for. Hope it helps.

Answer 2

If you use all of these CSS rules on one of the Vuetify example list codepens, it aligns the list item text center. (If you don't have a second line, you don't need the flex-direction: row part.)

.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;
}