Aligning the text to be at the center of a textfield in Vuetify

Question

I have a read only textfield that shows a string. The string starts from the left side of textfield as it should. I was wondering if there is a way in Vuetify to align the string to the center of textfield?

UPDATE This is my code:

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

Ritornello

please share your tried work – Famine

Updated the initial question, thanks. – Ritornello

Answer 1

In case you are using scoped styles, a deep selector (i.e. >>>) for the input field has to be used:

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

Weide

great finding: deep selector (i.e. >>>) , tks @Weide – Feminism

you save me a lot of time. Thank you for this! – Spar

Even w3schools did not mention that. Never saw that either. Nice finding! – Kukri

Answer 2

The cause of the text being aligned to the left is the base class for input that sets text-align: start. To solve this add a rule that for that input, for example:

template:

<v-text-field 
  class="centered-input text--darken-3 mt-3" 
  value="Select the configuration:" 
  color="grey lighten-43" 
  outline readonly single-line />

css:

.centered-input input {
  text-align: center
}

new Vue({ el: '#app' })

.centered-input input {
  text-align: center
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="stackoverflow">
    <v-text-field 
      value="Select the configuration:" 
      color="grey lighten-43" 
      class="centered-input text--darken-3 mt-3" 
      outline readonly single-line />
  </v-app>
</div>

Rotterdam

this is not working, while another answer a using >>> is – Chromogen

Strange. Why in some cases .centered-input input works (this is working pretty nice for me), but in some cases .centered-input >>> input works? – Exorcist

Answer 3

in my case

not working:

.centered-input input {
  text-align: center
}

working:

/deep/ .centered-input input {
  text-align: center
}

Pradeep

Answer 4

Working

style="left: auto; right: 0px; position: absolute;"

Hecker

Answer 5

In Vue 3, you can use the following syntax:

.center-text :deep(input) {
  text-align: center
}

Extenuatory