CODEWITHSUNDEEP
vuejs2vuetify.js
Sushil GC
Sushil GC

Reputation: 127

How to center align the text of v-select of vuetify components

I am using the Vuetify select component. How do I center align text along with dropdown on vuetify?

Tried with text-md-center but that does not work

<v-select
   :items="['Lagna Kundali']"
   label="Rasi" solo
   v-model="firstKundali"
   class="text-md-center"
>

Upvotes: 5

Views: 14412

Answers (3)

wael32gh
wael32gh

Reputation: 459

You can use vuetify slot:selection (tested in 2.3.10) so there's no need to modify CSS. Clean and easy:

<v-select
    :items="items"
    outlined
    :item-text="label"
    item-value="value"
  >
    <template v-slot:selection="{ item }">
      <span class="d-flex justify-center" style="width: 100%;">
        {{ item.label }}
      </span>
    </template>
  </v-select>

Upvotes: 4

Jeremy Walters
Jeremy Walters

Reputation: 2152

Valid for versions before vuetify v2

Wrap your component in a grid system. In the v-layout component you can you specify justify-center. Please take a look at example.

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout row wrap justify-center>
        <v-flex xs6>
          <v-select></v-select>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

Upvotes: 0

mouadsah
mouadsah

Reputation: 31

You can fix it by adding this css style :

.v-select__selection {
    width: 100%;
    justify-content: center;
}

Upvotes: 3

Related Questions