如何居中对齐vuetify组件的v-select文本

Question

我正在使用vuetify select component。 如何在vuetify上将文本与下拉菜单居中对齐。

尝试使用text-md-center但不起作用

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

Answer 1

您可以使用vuetify slot：selection（已在2.3.10中测试），因此无需修改CSS。干净又容易：

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

Answer 2

将组件包装在grid system中。在v-layout组件中，您可以指定justify-center。请看一下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>

Answer 3

您可以通过添加以下CSS样式来对其进行修复：

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