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

我在用电脑。 如何将文本与vuetify上的下拉列表对齐

尝试使用文本md中心，但不起作用

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

适用于vuetify v2之前的版本

将组件包装在一个容器中。在

v-layout

组件中，可以指定

justify center

。请看一看

---

您可以通过添加以下css样式来修复它：

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

---

您可以使用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>

{{item.label}

我的意思不是要对齐整个v-select组件，而是居中/对齐v-select组件的文本。选择文本和下拉菜单项需要居中对齐。抱歉，如果我没有澄清这个问题。对于Vuetify中的“芯片”选项，这将强制芯片的宽度为100%，而不是仅将芯片居中。

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