Центральный V-переключатель внутри V-Flex - PullRequest
Новая
       29

Центральный V-переключатель внутри V-Flex

1 голос
/ 28 марта 2019

Я хотел бы центрировать элемент v-switch внутри v-flex по горизонтали, и я уже пробовал это здесь: vuetify center items to v-flex , но, похоже, он не работает для v-switch element.

Обертываю ли я это внутри класса 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", не работает.

Вот кодекс , поэтому вы можете увидеть проблему

Как правильно это сделать?

Ответы [ 3 ]

2 голосов
/ 28 марта 2019

Добавьте 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>
2 голосов
/ 28 марта 2019

Вы можете сделать это, используя <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>

Вот кодекс .

0 голосов
/ 28 марта 2019

Примените «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-переключателя в центр, попробуйте использовать два разных тега v-layout для каждого тега v-flex. 

<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>
...