Vuetify制作正方形v-card，文本居中(两个轴)开发者社区

相关文章推荐

傻傻的帽子 · 编译器错误 CS0029 - C# ...· 11 月前 ·

读研的豌豆 · nginx点击劫持漏洞修复 - CSDN文库· 1 年前 ·

耍酷的鸡蛋面 · 打开网页的时候是全屏的怎么设置啊_百度知道· 1 年前 ·

悲伤的长颈鹿 · Springboot PostMapping ...· 2 年前 ·

从容的椰子 · mysq 存储过程判断为空null , ...· 2 年前 ·

腾讯云

开发者社区

文档意见反馈控制台

首页 TVP

文章/答案/技术大牛

发布

  <v-container fluid>
    <v-row>
      <v-col cols="6" sm="4">
        <v-card rounded color="info">
          <v-responsive aspect-ratio="1">
            <v-card-title>
              Top left - correct
            </v-card-title>
            <v-card-text class="text-center white--text">
              middle center
            </v-card-text>
            <v-card-actions class="justify-center white--text">
              bottom center
            </v-card-actions>
          </v-responsive>
        </v-card>
      </v-col>
    </v-row>
  </v-container>

.v-responsive__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center; // this will make everything vertical center
    justify-content: space-between
.v-responsive__content > div {
    width: 100%;
}

.my-card .v-responsive__content { ... }

  <v-row>
    <v-col align-self="center" cols="6">
      <v-card class="pa-3">align : start</v-card>
    </v-col>
    <v-col align-self="center" cols="6" offset="3">
      <v-card class="pa-3 text-center">align : center</v-card>

推荐文章

傻傻的帽子 · 编译器错误 CS0029 - C# reference | Microsoft Learn

11 月前

读研的豌豆 · nginx点击劫持漏洞修复 - CSDN文库

1 年前

耍酷的鸡蛋面 · 打开网页的时候是全屏的怎么设置啊_百度知道

1 年前

悲伤的长颈鹿 · Springboot PostMapping无法获取数据问题及解决_java_脚本之家

2 年前

从容的椰子 · mysq 存储过程判断为空null , mysql存储过程字符串拼接_存过过程 null判断_游离于移动互联网边缘的博客-CSDN博客

2 年前

回答 2

Stack Overflow用户

Stack Overflow用户