Выравнивание текста по центру текстового поля в Vuetify - PullRequest
Новая
       31

Выравнивание текста по центру текстового поля в Vuetify

0 голосов
/ 10 октября 2018

У меня есть текстовое поле только для чтения, которое показывает строку.Строка начинается с левой стороны текстового поля, как и должно быть.Мне было интересно, если в Vuetify есть способ выровнять строку по центру текстового поля?

ОБНОВЛЕНИЕ Это мой код: 

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

1 Ответ

0 голосов
/ 01 ноября 2018

Причиной выравнивания текста по левому краю является базовый класс для input, который устанавливает text-align: start.Чтобы решить эту проблему, добавьте правило, которое для этого ввода, например:

шаблон: 

<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/vuetify@1.3.5/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/vuetify@1.3.5/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>
...