html - 我怎样才能水平居中在一个?
问题描述
我正在使用 VueJS 和 Vuetify 为个人项目制作一个简单的登录和注册页面,但我不知道如何将我正在使用的 v-card 水平居中。
我一直在寻找一种方法,但文档没有给出任何答案,我在这里找不到任何问题,所以我决定问它。这是我的代码:
<template>
<v-container>
<v-row class="text-center">
<v-col cols="12">
<v-img
:src="require('../assets/logo.png')"
class="my-3"
contain
height="200"
/>
</v-col>
<v-col cols="12">
<h1 style="text-align:center">SelliBird</h1>
</v-col>
<v-container fluid>
<v-card style="max-width: 50%;" class="elevation-4 mx-auto" dark>
<v-card-text class="text-center">
<v-col class="mb-4">
<h4 style="text-align:center" v-if="options.isLoggingIn">Log in to your customer portal</h4>
<h4 style="text-align:center" v-else>Crate a new account</h4>
</v-col>
</v-card-text>
</v-card>
</v-container>
</v-row>
</v-container>
</template>
<script>
export default {
data(){
return{
options:{
isLoggingIn: true
}
}
}
}
</script>
解决方案
只需添加margin: 0 auto
到 v-card 的 style 属性就可以了。
推荐阅读
- mysql - 我无法从 Flask 应用程序的装饰器内部从数据库中获取数据
- pandas - Read_html 缺少第一个表
- amazon-web-services - Dotnet 无法安装工具
- python - Windows 10 中的 pip 安装 PyEngine 3D 问题
- java - Spring Boot 2.3 和 Spring Security 5 - 在一个模式中支持 UserDetailsService 和 OAuth2
- flutter - TextInput 不更新时包装在灵活包装在行
- mysql - MySQL 在 CTE 中设置变量:“select”很好,但“set”不起作用
- javascript - 我的机器人正在发送多条消息 discord.js
- unit-testing - 模拟服务调用返回 Null 而不是 false - 为什么?
- python - 在多个操作系统中运行 GNU Radio