CODEWITHSUNDEEP
vue.jsvuetify.js
SiliconMachine
SiliconMachine

Reputation: 606

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

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>

Upvotes: 8

Views: 25266

Answers (6)

Hamed
Hamed

Reputation: 1

just add a class of "text-center" to the <v-list>.

it should be like this : <v-list class = "text-center">

Upvotes: 0

Daniel Danielecki
Daniel Danielecki

Reputation: 10580

{{ element.content }} inside <v-list-tile-content> that's just a text, I suppose. Therefore, simply adding class="text-center" should work. I've had very similar issue with <v-list-item-title> and <v-list-item-title class="text-center"> did the trick.

Upvotes: 0

Rikkas
Rikkas

Reputation: 582

This should work for

v-list-item-component

to center a component in a v-list-item in vuetify versions > 2 as given on justify content with vuetify flex

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

Upvotes: 1

SiliconMachine
SiliconMachine

Reputation: 606

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.

Upvotes: 7

LShapz
LShapz

Reputation: 1766

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

Upvotes: 1

Fab
Fab

Reputation: 4657

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

This means that you have to set align-items: center to horizontally center the content within.

Upvotes: 0

Related Questions