两个元素未在移动视图中居中

Question

为什么我的两个 div 在移动视图中没有居中？我正在使用 Vuetify CSS flex helper justify-center 来实现它，但它不起作用。使用 justify-sm-center 它也不起作用。我哪里错了？

<v-col cols="12">
    <v-card elevation="3" class="d-flex flex-column flex-sm-row justify-center pt-2 pb-2">
        <div class="pt-2 pl-4">
            <span class="textoDos--text"><strong>¿No estás registrado?</strong></span>
        </div>
        <div>
            <v-btn
            plain
            class="textoDos--text"
            to="/registro"
            >
            <strong>Crear una cuenta</strong>
            </v-btn>
        </div>
    </v-card>
</v-col>

注意：flex-direction 是可以的。我需要它在 desktop/tablet 中为行，在移动设备中为列。你可以在这个codepen.

中查看

Answer 1

您可以使用助手 class align-center :

来解决这个问题

  <v-card elevation="3" 
          class="d-flex flex-column flex-sm-row justify-center pt-2 pb-2 align-center">

Answer 2

这是因为您在小型设备上使用 column 弯曲方向。 justify-center 和 align-center 在使用列方向时的工作方式不同。

justify-center

row direction 水平，column direction 垂直。

align-center

row direction 垂直，column direction 水平。

结论

只需将 align-center 添加到 v-card 元素即可。

<v-card elevation="3" class="d-flex flex-column flex-sm-row justify-center align-center pt-2 pb-2">

两个元素未在移动视图中居中

Two elements aren't centered in mobile view

css

flexbox

vue.js

vuetify.js

justify-center

align-center

结论