使用 VueJS 和 Vuetify 如何在 v-flex 中垂直和水平居中 v-switch？答案

【问题标题】：Using VueJS and Vuetify how can I vertically and horizontally center a v-switch in v-flex?使用 VueJS 和 Vuetify 如何在 v-flex 中垂直和水平居中 v-switch？
【发布时间】：2019-11-13 12:43:41
【问题描述】：

当元素连续排列时，我似乎无法将 v-switch 组件置于 v-flex 中。

感觉好像我已经尝试了Grid system 文档页面上所有记录在案的v-container、v-layout 和v-flex 道具，但似乎没有任何工作可以完成（即justify-center、@987654330 @等）。

我尝试了类似问题的解决方案，但无济于事。

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>

【问题讨论】：

标签： javascript css vue.js vuejs2 vuetify.js

【解决方案1】：

<v-flex xs4>
    <v-layout justify-center align-center>
         <v-switch prepend-icon="cloud" v-model="enabled"></v-switch>
    </v-layout>
</v-flex>

通过使用带有 justify 和 align center 的嵌套布局，您应该可以获得所需的效果。

【讨论】：

似乎没有达到预期的效果。我错过了什么吗？ Codepen

【解决方案2】：

我开始工作的解决方案是使用面向列的 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>

【讨论】：