使用VueJS和Vuetify如何在v-flex中将v-switch垂直和水平居中？
[英]Using VueJS and Vuetify how can I vertically and horizontally center a v-switch in v-flex?
问题描述
I cannot seem to center the v-switch component inside a v-flex when elements are oriented in a row. 
当元素排成一行时，我似乎无法将v-switch组件置于v-flex内部。
It feels as though I have tried all of the documented v-container , v-layout , and v-flex props on the Grid system documentation page and nothing seems to get the job done (ie justify-center , text-xs-center , etc). 感觉好像我已经尝试了Grid System文档页面上所有已记录的v-container ， v-layout和v-flex道具，似乎没有任何事情可以完成（即justify-center ， text-xs-center ，等等）。
I have tried the solutions in similar issues to no avail. 我已经尝试过类似问题的解决方案，但无济于事。
- Center v-switch inside a v-flex 在v-flex中居中放置v-switch
- vuetify center items into v-flex 将中心项目可视化为v-flex
new Vue({ el: '#app', data () { return { enabled: false } } })
<head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script> <div id="app"> <v-app id="inspire"> <v-container grid-list-xl style="background: IndianRed;"> <v-layout text-xs-center row wrap align-center style="height: 100px;"> <v-flex xs4> <v-card color="success"> Content </v-card> </v-flex> <!–– This guy right here --> <v-flex xs4> <v-switch prepend-icon="cloud" v-model="enabled"></v-switch> </v-flex> <v-flex xs4> <v-card color="success"> Content </v-card> </v-flex> </v-layout> </v-container> </v-app> </div>
2 个解决方案
解决方案1
0 2019-07-02 22:39:42
<v-flex xs4>
<v-layout justify-center align-center>
<v-switch prepend-icon="cloud" v-model="enabled"></v-switch>
</v-layout>
</v-flex>
by using a nested layout with justify and align center you should get the desired effect. 通过使用带有对齐和居中对齐的嵌套布局，您应该获得所需的效果。
解决方案2
0 已采纳 2019-07-03 20:10:19
The solution I got to work was to use a column oriented v-layout with align-center wrapped around the v-switch component. 我要解决的解决方案是使用面向列的v-layout ， align-center包裹在v-switch组件周围。
new Vue({ el: '#app', data () { return { enabled: false } } })
<head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script> <div id="app"> <v-app id="inspire"> <v-container grid-list-xl style="background: IndianRed;"> <v-layout text-xs-center row wrap align-center style="height: 100px;"> <v-flex xs4> <v-card color="success"> Content </v-card> </v-flex> <!–– This guy right here --> <v-flex xs4> <v-layout column align-center> <v-switch prepend-icon="cloud" v-model="enabled"></v-switch> </v-layout> </v-flex> <v-flex xs4> <v-card color="success"> Content </v-card> </v-flex> </v-layout> </v-container> </v-app> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.