Vue.js 如何在vuetify中水平对齐项目
我被困了几个小时,只是为了在v-card中垂直和水平对齐一个项目。下面这张图片是我目前拥有的,我只需要垂直对齐项目,但我不知道如何对齐。有人能帮我吗?提前谢谢 我的代码:Vue.js 如何在vuetify中水平对齐项目,vue.js,vuetify.js,nuxt.js,Vue.js,Vuetify.js,Nuxt.js,我被困了几个小时,只是为了在v-card中垂直和水平对齐一个项目。下面这张图片是我目前拥有的,我只需要垂直对齐项目,但我不知道如何对齐。有人能帮我吗?提前谢谢 我的代码: <div class="pt-3"> <v-card class="pa-3"> <v-row align="center" justify="center" v-bind:s
<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;
},
},
mdi摄像机
上传
计算:{
设备高度(){
返回此值。$vuetify.breakpoint.height;
},
设备宽度(){
返回此值。$vuetify.breakpoint.width;
},
},
一些Vuetify组件使用了align
和justify
道具,但它们在原生HTMLdiv
上不起作用。相反,请使用v卡上的相应类别
<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>
mdi摄像机
上传
v-row
的行为类似于flex容器
,所有的道具,如justify
或align
或任何flex容器属性,都只对其起作用。只需将urdiv
更改为v-row
。尽管有一个问题是v-row
有一些负边距,您可以通过使用no-gutters
<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%">
<v-row no-gutters align="center" justify="center">
<v-icon>mdi-camera</v-icon>
<h3>Upload</h3>
</div>
</v-card>
</v-col>
</v-row>
</v-card>
</div>
mdi摄像机
上传
感谢您的回复。我已经编辑了我的帖子