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

roejwanj 于 2022-11-17 发布在 Vue.js

关注(0)|答案(4)|浏览(156)

我有一个显示字符串的只读文本字段。字符串从文本字段的左侧开始，因为它应该。我想知道是否有一种方法在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>

vue.js

来源：https://stackoverflow.com/questions/52742131/aligning-the-text-to-be-at-the-center-of-a-textfield-in-vuetify

4条答案

按热度按时间

e7arh2l61#

如果您正在使用范围样式，则必须使用输入字段的深层选择器（即>>>）：
第一个

赞(0）回复(0）举报 2022-11-17

chy5wohz2#

文本左对齐的原因是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
}

第一个

赞(0）回复(0）举报 2022-11-17

7xllpg7q3#

就我而言
不工作：

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

正在工作：

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

赞(0）回复(0）举报 2022-11-17

u7up0aaq4#

工作中

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

赞(0）回复(0）举报 2022-11-17

我来回答

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

4条答案

相关问题

热门标签

最新问答