javascript - CSS 容器中的项目未正确对齐
问题描述
我正在按照YouTube 教程练习 JavaScript 和 CSS 。
这是 GitHub 存储库的链接,其中可以找到脚本。
我手动输入了整个代码,以便更熟悉它。在我的浏览器中打开时index.html
,内容显示在最底部和最右边,而不是应该居中。我想也许我有一个错字,所以我从 GitHub 复制并粘贴了整个代码并刷新它,仍然没有任何变化。我可能做错了什么?问题可能出在索引而不是脚本上吗?
这是我的代码:
:root {
background-color: #ecf5ff;
font-size: 62.5%;
}
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
}
h1,
h2,
h3,
h4 {
margin-bottom: 1rem;
}
h1 {
font-size: 5.4rem;
color: #56a5eb;
margin-bottom: 5rem;
}
h1 > span {
font-size: 2.4rem;
font-weight: 500;
}
h2 {
font-size: 4.2rem;
margin-bottom: 4rem;
font-weight: 700;
}
h3 {
font-size: 2.8rem;
font-weight: 500;
}
/* UTILITIES */
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 80rem;
margin: 0 auto;
}
.container > * {
width: 100%;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-center {
justify-content: center;
align-items: center;
}
.justify-center {
justify-content: center;
}
.text-center {
text-align: center;
}
.hidden {
display: none;
}
/* BUTTONS */
.btn {
font-size: 1.8rem;
padding: 1rem 0;
width: 20rem;
text-align: center;
border: 0.1rem solid #56a5eb;
margin-bottom: 1rem;
text-decoration: none;
color: #56a5eb;
background-color: white;
}
.btn:hover {
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
transform: translateY(-0.1rem);
transition: transform 150ms;
}
.btn[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="widh=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Quick Quiz</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="container"></div>
<div id="home" class="flex-center flex-column"></div>
<h1>Oberlingual</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High scores</a>
</body>
</html>
解决方案
Html 代码有 2 个错误。2 div 元素没有任何子元素,因为您在错误的位置关闭了每个元素。此代码将起作用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="widh=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Quick Quiz</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="container">
<div id="home" class="flex-center flex-column">
<h1>Oberlingual</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High scores</a>
</div>
</div>
</body>
</html>
推荐阅读
- sql - 如何编写 SQL 代码以生成 4 级 JSON 输出?
- laravel - Laravel 包登录重定向到带有 302 状态码的起始页面
- java - 出现输入键盘时导航栏位置出现黑色空白区域问题
- queryselector - 关于 document.querySelector 多个元素的问题
- javascript - 如何让“document.getElementById”src 成为一个相对 url?
- python - 是否有 SQL/NoSql 双端队列或实现 TimeSeries Dada 的简单方法?
- python - Python Selenium 不会打印里面的数字
- java - 弹簧靴。通过 PropertiesLauncher 运行时主类的循环 @Import
- python - 如何连接到 HDFS 以执行 Pyspark 并使用 DSN 构建 Spark 数据帧?
- android - 当我想设置自定义颜色时,CardBackgroundColor 保持灰色,而默认颜色可以正常工作