html - 卡片卡在页面顶部 bootstrap 4
问题描述
我试图在页面中间对齐容器,但它似乎卡在页面顶部。
我读过一个类似的问题,但它们似乎不起作用。我复制了一些代码片段,但在我的 Firefox 浏览器中,它们似乎仍然停留在页面顶部。我不确定这是否是浏览器问题。
这是我的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log In</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container d-flex justify-content-center h-100 mx-auto">
<div class="row justify-content-center">
<div class="col">
<div class="card text-center" style="min-width: 23rem; max-width: 23rem;">
<div class="card-header bg-success text-white text-center">Login</div>
<div class="card-body">
<form>
<div class="form-row mb-2">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-row mb-4">
<label for="Password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<div class="row">
<div class=" col text-center">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="container-fluid h-100 d-flex flex-column justify-content-center">
<div class="row justify-content-center bg-info">
<div class="col-4">
<div class="card">
<div class="card-header">Access</div>
<div class="card-body">
<div class="form-group">
Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. Aliquam codeply mauris arcu, tristique a lobortis vitae, condimentum feugiat justo.
</div>
</div>
<div class="card-footer text-right">
<button type="submit" class="btn btn-danger">ok</button>
</div>
</div>
</div>
</div>
</div> -->
</body>
</html>
解决方案
您可以通过添加以下内容来实现所需的行为:
align-items: center;
类 =“container-fluid”的 CSS 样式。
推荐阅读
- php - PhpStorm Xdebug、WSL2、Docker // 无法评估表达式 '$_SERVER['SERVER_PORT']'
- javascript - vue.js 无法在创建的函数内调用函数
- java - Maven POM
不工作时 是否设置 - javascript - 如何在 Angular JS 中迭代数组
- java - Arch 测试失败 STANDARD_STREAMS
- git - 运行 git pull 后显示许多已删除文件的 Git 状态
- node.js - 尝试通过 Windows 中的驱动器号访问网络共享时 ENOENT
- testing - 测试网络上设备之间的连接
- python - Python Flask_restplus flash_restx 动态编组响应
- windows - 在 Windows 上使用 RenderResolutionScale 属性创建 EGLSurface 失败