在 v-text-field 中居中 Label

Question

您好，我尝试了不同的解决方案来将 label 在我的 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;
    }

有没有办法将我的 label 与 vuetify 对齐

Answer 1

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

经过检查，您会注意到 label 绝对位于其父级中，并且要使其相对于其父级水平居中，您需要覆盖其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！