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

Question

我正在使用Vuetify选择组件，如何使下拉菜单和文本居中对齐？尝试了text-md-center但不起作用。

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

- Sushil GC

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>

- wael32gh

Answer 2

你可以通过添加以下CSS样式来修复它：
你的CSS代码

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

- mouadsah

---

对于 Vuetify 中的 "chips" 选项，这会强制芯片的宽度为 100%，而不仅仅是将芯片居中。 - Nic Scozzaro

Answer 3

适用于vuetify v2之前的版本

将您的组件包装在网格系统中。在 v-layout 组件中，您可以指定 justify-center。请参考示例。

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

- Jeremy Walters

---

我并不是要为整个v-select组件进行辩解，而是想让v-select组件中的文本居中/对齐。选择文本和下拉菜单项需要居中对齐。 如果我的问题没有表述清楚，请见谅。 - Sushil GC