vue.js - 如何在vuetify中水平对齐项目
问题描述
我被困了好几个小时,只是为了在 v-card 中垂直和水平对齐一个项目。下面这张图片是我目前拥有的,我只需要垂直对齐项目,但我不知道如何。谁能帮我?提前致谢
我的代码:
<div class="pt-3">
<v-card class="pa-3">
<v-row align="center" justify="center" v-bind:style="{ height: deviceHeight * 0.6 + 'px',}">
<v-col class="fill-height" height="500">
<v-card class="text-center grey" height="100%">
<div align="center" justify="center">
<v-icon>mdi-camera</v-icon>
<h3>Upload</h3>
</div>
</v-card>
</v-col>
</v-row>
</v-card>
</div>
computed: {
deviceHeight(){
return this.$vuetify.breakpoint.height;
},
deviceWidth(){
return this.$vuetify.breakpoint.width;
},
},
解决方案
和属性用于一些 Vuetify 组件,但它们不适用于原生align
HTML 。而是在...上使用适当的类justify
div
v-card
<v-card class="text-center grey d-flex flex-column align-center justify-center" height="100%">
<div>
<v-icon>mdi-camera</v-icon>
<h3>Upload</h3>
</div>
</v-card>
推荐阅读
- php - Apache/PHP 响应时间和执行时间
- symfony - 如何使用 Api 平台过滤器过滤实体子资源
- javascript - 在多个函数中抛出相同 TypeError 的 DRY 方法
- c++ - “未定义的 _imp__ 引用”在 Eclipse 上使用 MinGW
- kubernetes - Kubernetes 删除 pod 作业
- sql - 将 nvarchar 中的属性映射到具有 int 数据类型的另一列
- python - Jupyter notebook 找不到 pyxlsb 模块
- oracle - 使用 JDBC 生成 PySpark Oracle 序列。阅读
- ssis - 与 SSIS 中的 sysname 等效的数据类型
- json - 尝试从 TfL 的 API (JSON) 检索线路状态