v-select of vuetify 구성 요소의 텍스트를 가운데 정렬하는 방법

v-select of vuetify 구성 요소의 텍스트를 가운데 정렬하는 방법

Vuetify 셀렉트 컴포넌트를 사용하고 있습니다.vuetify 시 드롭다운과 함께 텍스트를 중앙에 정렬하려면 어떻게 해야 합니까?

text-md-center에서 시도했지만 작동하지 않습니다.

<v-select
   :items="['Lagna Kundali']"
   label="Rasi" solo
   v-model="firstKundali"
   class="text-md-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>

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>

언급URL : https://stackoverflow.com/questions/54536464/how-to-center-align-the-text-of-v-select-of-vuetify-components