将文本对齐到 Vuetify 中文本字段的中心

Question

我有一个显示字符串的只读文本字段。字符串应该从文本字段的左侧开始。我想知道 Vuetify 是否有办法将字符串与文本字段的中心对齐？

更新 这是我的代码：

<v-text-field
  value="Select the configuration:"
  color="grey lighten-43"
  class="text--darken-3 mt-3 text-xs-center"
  outline
  readonly
  single-line
></v-text-field>

Answer 1

如果您使用范围样式，>>>则必须使用输入字段的深度选择器（即）：

<v-text-field 
  class="centered-input text--darken-3 mt-3" 
  value="Select the configuration:" 
  color="grey lighten-43" 
  outline readonly single-line />

<style scoped>
    .centered-input >>> input {
      text-align: center
    }
</style>

Answer 2

文本左对齐的原因是该input集合的基类text-align: start。要解决此问题，请为该输入添加一条规则，例如：

模板：

<v-text-field 
  class="centered-input text--darken-3 mt-3" 
  value="Select the configuration:" 
  color="grey lighten-43" 
  outline readonly single-line />

css：

<v-text-field 
  class="centered-input text--darken-3 mt-3" 
  value="Select the configuration:" 
  color="grey lighten-43" 
  outline readonly single-line />

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

new Vue({ el: '#app' })

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