html - 在 v-flex 中居中 v-switch

Question

我想将 v-switch 居中v-flex 中的元素水平，我已经在这里尝试过:vuetify center items into v-flex , 但它似乎不适用于 v-switch元素。

我是否像这样将它包装在一个 div 类中:

<v-flex xs12 md2 >
    <div class="text-xs-center">
        <v-switch
            @click="someFunction()"
            label="Some Label Name"
            color="black"
            value="secondary"
            hide-details
        ></v-switch>
    </div>
</v-flex>

或者我直接在v-flex里面使用类:

<v-flex xs12 md2 text-xs-center>

这是行不通的。还使用其他类，如 class="justify-center"不起作用。

这是一个codepen , 所以你可以看到问题

正确的做法是什么？

Answer 1

在 v-switch 标签中添加 class="switch-center" 并在 CSS 下方写入将解决您的问题。谢谢

.switch-center {
  display: flex;
  justify-content: center;
}

.switch-center {
  display: flex;
  justify-content: center;
}

<v-flex xs12 md2 >
    <div class="text-xs-center">
        <v-switch
            class="switch-center"
            @click="someFunction()"
            label="Some Label Name"
            color="black"
            value="secondary"
            hide-details
        ></v-switch>
    </div>
</v-flex>