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>

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

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

Solution 3

in my case

not working:

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

working:

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

Comments

[Lloyd]

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

[egidiocs]

great finding: deep selector (i.e. >>>) , tks @samwise