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

- mha

---

请分享您尝试过的工作。 - Boussadjra Brahim

更新了初始问题，谢谢。 - mha

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>

- samwise

---

伟大的发现: 深度选择器 (即 >>>) ，感谢 @samwise - egidiocs

你为我节省了很多时间。谢谢你！ - Kim Tormes

连w3schools都没有提到过这个。我也从未见过。不错的发现！ - Christopher Schönfeldt

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：

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

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

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

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.3.5/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.3.5/dist/vuetify.min.js"></script>

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

- a--m

---

这不起作用，而另一个答案使用 >>>。 - Lloyd

奇怪。为什么在某些情况下 .centered-input input 起作用（这对我来说效果很好），但在某些情况下 .centered-input >>> input 起作用？ - Vitomir

Answer 3

在我的情况下

无法正常工作：

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

工作中:

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

- hgkim

Answer 4

工作中

style="left: auto; right: 0px; position: absolute;"

- Aldwin Filoteo

Answer 5

在Vue 3中，你可以使用以下语法：

.center-text :deep(input) {
  text-align: center
}

- dotNET