Existe-t-il un moyen de centrer le contenu verticalement dans Vuetify?
Avec la classe d'assistance text-xs-center
, le contenu est uniquement centré horizontalement:
<v-container grid-list-md text-xs-center>
<v-layout row wrap>
<v-flex xs12>
Hello
</v-flex>
</v-layout>
À partir de API , j'ai testé d'autres classes d'aide telles que align-content-center
mais je n'ai pas obtenu le résultat.
Vous pouvez utiliser align-center
pour layout
et _fill-height
_ pour le conteneur.
DÉMO
_new Vue({
el: '#app'
})
_
_.bg{
background: gray;
color: #fff;
font-size: 18px;
}
_
_<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-container bg fill-height grid-list-md text-xs-center>
<v-layout row wrap align-center>
<v-flex>
Hello I am center to vertically using "align-center".
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
_
Voici une autre approche utilisant le système Vuetify grid
disponible dans Vuetify 2.x
: https://vuetifyjs.com/fr/components/grids
<v-container>
<v-row justify="center">
Hello I am center to vertically using "grid".
</v-row>
</v-container>