两个元素不在移动视图中居中答案

【问题标题】：Two elements aren't centered in mobile view两个元素不在移动视图中居中
【发布时间】：2022-01-25 22:12:58
【问题描述】：

为什么我的两个 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>

注意：弹性方向是可以的。我需要它是桌面/平板电脑中的行和移动设备中的列。你可以在这个codepen查看。

【问题讨论】：

标签： css vue.js flexbox vuetify.js

【解决方案1】：

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

居中对齐

row direction 为水平，column direction 为垂直。

居中对齐

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

【讨论】：

【解决方案2】：

您可以使用帮助类 align-center 来解决这个问题：

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

【讨论】：