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

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

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

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

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