なんの記事?
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 と同じ方法ではうまくいきませんでした。(左寄せのまま)
参考