Vuetify制作正方形v-card，文本居中(两个轴)
Vuetify制作正方形v-card，文本居中(两个轴)
提问于 2020-10-29 02:17:17
我正在尝试制作一张在正方形中间居中显示卡片文本的v-card。我试过使用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-card在增长或缩小时保持方形(根据需要)，文本保持水平居中(根据需要)，文本不垂直居中(问题所在)。
JSFiddle：
期望的结果：
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-10-29 04:40:29
使用此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冲突的类命名空间：
.my-card .v-responsive__content { ... }Stack Overflow用户
发布于 2020-10-29 02:59:52
对于水平方向，可以在v-col上使用align-self (如果要在单独的行中放置，则在v-row上使用align )，对于垂直方向，可以在v-col上使用offset
<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>
</v-col>
<v-col align-self="end" cols="6" offset="6">
<v-card class="pa-3 text-end">align : end</v-card>
</v-col>
</v-row>下面是更新后的jsfiddle：https://jsfiddle.net/tunzLcw5/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64578989
复制相关文章
相似问题
腾讯云开发者
