v-text-field 中的中心标签

【问题标题】：center Label in v-text-fieldv-text-field 中的中心标签
【发布时间】：2020-07-27 18:59:21
【问题描述】：

您好，我尝试了不同的解决方案来将标签居中在我的 v-text-field 中，不幸的是它们都不起作用。请在下面找到代码：

html代码

<v-text-field dark class="centered-input" label="your code"></v-text-field>

css代码

    .centered-input >>>  label {
        color: white;
        font-size:20px;
        text-align: center;
    }

有没有办法让我的标签与 vuetify 对齐

【问题讨论】：

不清楚您要达到什么目标，以什么为中心？

标签： html css vue.js vuetify.js

【解决方案1】：

好吧，text-align: center 正确应用。文本在此框中完全居中：

经过检查，您会注意到标签绝对位于其父级中，并且要使其相对于其父级水平居中，您需要覆盖其 left 和 transform 值。这是必要的 SCSS：

.v-text-field.centered-input .v-label {
  left: 50% !important;
  transform: translateX(-50%);
  &.v-label--active {
    transform: translateY(-18px) scale(.75) translateX(-50%);
  }
}

在这里查看它的工作原理：https://codepen.io/andrei-gheorghiu/pen/rNOObmN

注意：不幸的是，!important 是必需的，因为 left 值通过 JavaScript 内联应用于元素上。一定喜欢 Vuetify！

【讨论】：