Vuetifyでv-text-fieldの中の文字をセンタリングする方法

2459 ワード
小ネタ CSS Vuetify CSS テキストリンク

なんの記事？

Vuetify の v-text-field の中の文字はデフォルトでは左寄せ。
それをセンタリングしたい時にどうするか。

dispbarcode.comを開発した際に実施した内容を記事化しました。

方法

以下のCSSを作成しておき、それを v-text-field に適用する。

.centered-input input {
  text-align: center
}

コード抜粋

index.vue
<!-- 抜粋です -->
        <v-row row justify-center align-center>
          <v-col xs12 class="d-flex justify-center">
              <v-text-field
                label="code"
                v-model="barcodeValue"
                class="centered-input"
                :hide-details="true"
                :change="changeWidth()"
                placeholder="input code"
              />
          </v-col>
        </v-row>

表示例

「code」と「name」のところが v-text-field になっています。
「format」は v-select です。

わかっていない点

v-select の文言をセンタリングする方法がわかっていません。
v-text-field と同じ方法ではうまくいきませんでした。（左寄せのまま）

参考