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-layout row wrap justify-center>来代替<v-layout column>。您还需要将md10更改为md12，使v-switch出现在中间：

<v-layout row wrap justify-center>
        <v-flex class="red" xs12 md12>
          Text Text Text <br>
          Text Text Text <br>
          Text Text Text <br>
          Text Text Text <br>
        </v-flex>
        <v-flex xs12 md2>
                <v-switch
                    @click="SomeFunction"
                    label="Some Label Name"
                    color="black"
                    value="secondary"
                    hide-details
                ></v-switch>
        </v-flex>
    </v-layout>

这里是Codepen。

Answer 2

在class="switch-center"标记中添加v-switch，并在 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>

Answer 3

将“ justify-center”应用于“ v-layout”标签，该标签应位于“ v-flex”标签之前。

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

编辑：刚刚在注释中看到了您的Codepen。假设您在将v-switch移到中心时尝试使文本向左对齐，请为每个v-flex标签尝试使用两个不同的v-layout标签。

<v-layout column>
    <v-flex xs12 md10>
        TEXT
    </v-flex>
</v-layout>
<v-layout column align-center>
    <v-flex xs12 md2 >
        <v-switch
            @click="SomeFunction"
            label="Some Label Name"
            color="black"
            value="secondary"
            hide-details
        ></v-switch>
    </v-flex>
</v-layout>

在v-flex中居中放置v-switch

3 个答案: