Vuetify-用居中文字（两轴）制作方形v卡

debugcn 发表于 Dev

G.肉汤

我正在尝试制作一个V卡，其卡文字正好位于正方形的中间。我尝试使用v-spacer和vuetify随附的其他一些CSS类，但是不幸的是，虽然文本保持水平居中，但是我很难使其垂直居中。

除了中间文本的垂直居中之外，这段代码几乎可以正常工作

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

这是一个带有示例的JS小提琴：https : //jsfiddle.net/mrpquke4/3/

尝试使用上面的示例调整浏览器窗口的大小，您将看到v卡在增大或缩小时保持方形（根据需要），文本保持水平居中（根据需要），文本不在垂直居中（问题）。

JSFiddle：

所需结果：

赛德

使用此CSS：

.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%;
}

您可以为类的任何CSS冲突命名空间：