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

Question

为什么我的两个div不集中在移动视图中？我正在使用Vuetify，来实现它，但是它不起作用。使用正当性中心也不起作用。我哪里错了？

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

注意:弯曲方向是可以的。我需要它是行在桌面/平板电脑和列在移动。您可以在这个码页中检查它。

Answer 1

您可以使用助手类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的工作方式不同。

对正中心

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

对齐中心

• 垂直于row direction，水平在column direction。

结论

只要将align-center添加到v卡元素中，就可以了。

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