[Vuejs]-Center Label in v-text-field

by

4👍

✅

Well, text-align: center applies correctly. The text gets quite centered inside this box:

label box

Upon inspection, you’ll notice the label is absolutely positioned in its parent and, to center it horizontally relative to its parent, you’ll need to override its left and transform values. Here’s the necessary SCSS:

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

See it working here: https://codepen.io/andrei-gheorghiu/pen/rNOObmN

Note: the !important is, unfortunately, necessary, as the left value is applied inline, on the element, via JavaScript. Gotta love Vuetify!

👤tao

Leave a comment