时间戳

首页 > 解决方案 > 在 Vuetify 中将文本对齐到文本字段的中心

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

问题描述

我有一个显示字符串的只读文本字段。字符串应该从文本字段的左侧开始。我想知道 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>

标签： htmlcssvue.jstextfieldvuetify.js

解决方案

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

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

推荐阅读