v-text-field 文本中心不工作 Vuetify答案

【问题标题】：v-text-field text-center not working Vuetifyv-text-field 文本中心不工作 Vuetify
【发布时间】：2020-10-22 09:05:35
【问题描述】：

我正在使用v-text-field，它无法将text-align 设置为center。

我尝试了这些解决方案，但没有奏效。

<v-text-field type="number" class="mr-2 text-center"></v-text-field>

<v-text-field type="number" class="mr-2 centered-input"></v-text-field>

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

【问题讨论】：

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

如果你在当前的 Vue 文件中给出样式，它将不起作用。您应该将样式添加为全局样式。

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

或者您似乎已将scoped 添加到<style> 标记。您可以删除它以使样式成为全局样式。

来自

<style lang="scss" scoped>

到

<style lang="scss">

【讨论】：

【解决方案2】：

试试这个方法：

<v-text-field type="number" class="my-field" />

.my-field {
    width: 200px;
}

.my-field input {
    padding: 10px;
    background: #ccc;
    text-align: center;
}

【讨论】：