如何在<v-container>中水平居中<v-card>？
在<v-container>中水平居中<v-card>可以通过以下步骤实现：
- 首先，在<v-container>中添加一个类名为"justify-center"的属性，该属性可以使其子元素水平居中。
<v-container class="justify-center">
<v-card>
<!-- 卡片内容 -->
</v-card>
</v-container>- 然后，使用Flex布局的方式将<v-card>元素水平居中。在<v-card>中添加一个类名为"d-flex"的属性，并使用内联样式设置"justify-center"属性，使其水平居中。
<v-container class="justify-center">
<v-card class="d-flex" style="justify-content: center;">
<!-- 卡片内容 -->
</v-card>
</v-container>这样，<v-card>元素就会在<v-container>中水平居中显示了。
关于腾讯云相关产品和产品介绍链接地址，可以参考腾讯云官方文档或者腾讯云官方网站获取更详细的信息。
相关·内容
2回答
我目前正在做我的网站登录页面，但我不能正确地对我的v卡水平和垂直。v-layout align-center justify-center column fill-height> <v-cardhave account: <a>Register</a></p> </v
浏览 1提问于2020-08-06得票数 1
回答已采纳
我正在尝试制作一张在正方形中间居中显示卡片文本的v-card。我试过使用v-spacer和其他一些vuetify附带的CSS类，但不幸的是，虽然文本保持水平居中，但我在使它垂直居中时遇到了困难。除了中间文本的垂直居中之外，这段代码几乎所有内容都可以正常工作 <v-container fluid> <v-col cols="6" sm="4">text&qu
浏览 367提问于2020-10-29得票数 1
回答已采纳
我正在用VueJS和Vuetify为一个个人项目做一个简单的登录和注册页面，但我不知道如何将我正在使用的V卡水平居中。下面是我的代码： <v-container> <v-col cols="12fluid>
<v-card style="max-width: 50%;&quo
浏览 41提问于2021-03-04得票数 0
回答已采纳
3回答
我试图在Vue 2上运行的Nuxt项目中，在Vuetify中创建一张卡片，该项目由一个背景图像和一个水平和垂直中心的单一按钮组成。我试过使用d-flex，以及v-row和v-col，但是在第一种情况下，它是垂直的，但不是水平的，在第二种情况下，它是水平的，但不是垂直的。>
<v-img height="600"
浏览 10提问于2022-02-04得票数 1
10回答
垂直于香精的中心内容
、、、
对于text-xs-center助手类，内容只能水平地居中： <v-layout row wrap> Hello </v-layout>在中，我测试了其他一些帮助类，比如align-content-center，但是没有达到这个结果
浏览 0提问于2018-09-15得票数 85
回答已采纳
1回答
5.0.6 \x{##**$}##**##**$2.6.7 <v-card max-width="525px"> <v-form ref="login"/>
&l
浏览 10提问于2022-07-04得票数 0
回答已采纳
1回答
我有下面的对话框，每当我在它的组件中添加任何内容时，就会出现一个水平滚动条，而我的对话框的右边突然有一个空格。类似于参考图
这里有我所有的代码：<template> <v-dialog > <div>
<
浏览 3提问于2020-10-30得票数 1
回答已采纳
1回答
我使用的是一个与居中卡片相结合的工具栏。V形容器是填充高度的，其中的布局居中。V-工具栏有一个属性'app'，它根据工具栏的高度给出v-content的顶部填充。<v-layout justify-center align-center> <v-card<v-card-text>HUH <br /> <br /> &l
浏览 56提问于2019-03-14得票数 3
回答已采纳
end <v-container class="my-1 py-0"> <a v-bind:href=match.DT_RowId}`">Upload Score Card</a> # I want to display this link only when @role == 'admin'
</v-card
浏览 7提问于2021-09-02得票数 0
2回答
当我在v卡文本标记中插入文本时，v卡是
html <v-app id="inspire">} font-size: 1.2em; padding-bottom: 7%;请参阅
，不<e
浏览 0提问于2018-06-21得票数 3
1回答
在vuetify中，我想水平/垂直居中旋转的轮子。到目前为止，我有这个，但它不是垂直居中。我怎么才能修复它呢？<div id="app"> <v-card height="200">
<v-layout column align-center50" color="primary" class=
浏览 0提问于2019-08-03得票数 3
1回答
我在这里面临的问题是，我无法弄清楚如何在页面刷新时保留表单中的值。每次我刷新页面时，表单中所有填充的值都会消失。 帮我解决这个问题。<template> <v-form :model='user' class="content-padding" ref='pdfInputs'>
<div class="section-
浏览 7提问于2020-04-15得票数 0
回答已采纳
6回答
我正在尝试添加一张带有vue和vuetify的卡片，它将占用我的容器中的空间，使用v-flex创建一个水平卡，其垂直行为方式是相同的。app> </v-toolbar> <v-containerjustify-center >
浏览 1提问于2018-04-20得票数 20
回答已采纳
1回答
我不能在一张卡片上排成一行将Vuetify复选框居中。我已经尝试过text-center并在复选框中列出了这些类：我尝试了以下CSS黑客攻击，但没有成功： <v-row> <v-card
class="m
浏览 8提问于2022-02-17得票数 1
回答已采纳
3回答
我正在尝试更改某些列中的行的放置方式。如附件图像所示，我希望红牌项目延伸到放置的行上，但是我不确定如何才能做到这一点。然后，蓝色卡片项目应该移到底部，而不是像图片上那样留下空白。Pri eu justo aeque torquatos.`}) <v-app id="inspire"> <v-col cols
浏览 0提问于2020-01-28得票数 6
回答已采纳
我正在尝试创建一个视图，其中有一个顶部元素，第二个元素垂直居中于其下方的剩余空间中。 </v-app-bar> <v-container="center">
浏览 0提问于2019-08-14得票数 5
回答已采纳
我似乎想不出如何在下面的代码页中获得长文本来中断和包装。它关闭屏幕，使附加按钮不可点击。我已经尝试了我能想到的每一个css规则。<div id="app"> <v-container class="modal-container"> <v-treeview :itemsitem, open, leaf }"><v-btn small>Do
浏览 1提问于2019-01-09得票数 0
回答已采纳
1回答
我尝试将元素组合到一个括号中，并获得错误消息。当将组件分开堆叠时，前端只会出现底部模板。有没有一种方式，两个堆栈UI组件使用vue-路由器？编辑:我的目标是将两个ui组件(如照片网格和vuetify中的旋转木马)放在另一个上面，以创建一个类似于这个截图的打印。 <v-layout> <v-card>
<v-container</em
浏览 1提问于2018-12-11得票数 1
回答已采纳
1回答
我有多个卡片，每个卡都有唯一的in和任务，如sc：中所示。 <v-row dense align="center" justify="center">
浏览 2提问于2022-02-14得票数 0
回答已采纳
1回答
我有垂直和水平的图片，我想做瀑布/砖石/pinterest网格布局，我发现可以做一个'stack‘网格，但我尝试了很多不同的代码，但我仍然没有做到，因为我想在我现有的代码中实现它(我太新了，不能这么做提前谢谢你 <template > fluid text-xs-center max-heightsm6 md4 lg3 class="mr-2 mb-2"
浏览 21提问于2019-05-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
