Метка центра в v-текстовом поле - PullRequest
Новая
       6

Метка центра в v-текстовом поле

0 голосов
/ 15 апреля 2020

привет. Я пробовал разные решения для центрирования метки в моем текстовом поле, к сожалению, ни одно из них не сработало. пожалуйста, найдите код ниже:

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

1 Ответ

1 голос
/ 15 апреля 2020

Ну, text-align: center применяется правильно. Текст в этом поле становится по центру:

label box

После проверки вы заметите, что метка абсолютно расположена в своем родительском элементе и, по центру горизонтально относительно его родителя, вам нужно переопределить его значения left и transform. Вот необходимый S CSS: 

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

...