なんの記事？
Vuetify の v-text-field の中の文字はデフォルトでは左寄せ。
それをセンタリングしたい時にどうするか。
dispbarcode.comを開発した際に実施した内容を記事化しました。
方法
以下のCSSを作成しておき、それを v-text-field に適用する。
.centered-input input {
text-align: center
}
コード抜粋
index.vue
<!-- 抜粋です --><v-rowrowjustify-centeralign-center><v-colxs12class="d-flex justify-center"><v-text-fieldlabel="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 と同じ方法ではうまくいきませんでした。（左寄せのまま）