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

就我而言

不起作用：

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

工作：

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

Answer 2

导致文本向左对齐的原因是设置input的{{1}}的基类。要解决此问题，请为该输入添加一条规则，例如：

模板：

text-align: start

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
}

Answer 3

如果您使用的是作用域样式，则必须使用用于输入字段的深层选择器（即>>>）：

<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>

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

3 个答案: