我已经开始为作业创建一个简单的页面，并且尝试将标题放在页面顶部，但每当我创建段落或 h1 时，它都会放置在 div 旁边，内容位于中心。我认为问题与集中并将其属性赋予主体的CSS代码有关，我怀疑它与容器类有关。
我尝试将标题放在不同的位置，但似乎无法将其移动到我想要的位置。我还尝试为标题创建一个不同的 id，以便它以不同的方式对齐。
<head>
<style>
body {
background-color: #849edb;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#container {
background-color: white;
padding: 30px;
text-align: center;
border-radius: 15px;
width: 15%;
padding: 20px;
margin: 10px;
}
</style>
</head>
<div>
<a href='index.html'>
<img src="casa1.png" alt="" style="position:absolute; left:50px; top: 50px;" />
</a>
<h1>Title</h1>
</div>
<body>
<div id="container">
<h2>Sports</h2>
<p>Text here</p>
</div>
<div id="container">
<h2>Informatics</h2>
<p>Text here</p>
</div>
<div id="container">
<h2>Arts</h2>
<p>Text here</p>
</div>
</body>使用本节：-
<div>
<a href = 'index.html'>
<img src="casa1.png" alt="" style="position:absolute; left:50px; top: 50px;"/>
</a>
<h1>Title</h1>
</div>
<body>也许这就是您正在尝试做的:-
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#body {
background-color: #849edb;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#container {
background-color: white;
padding: 30px;
text-align: center;
border-radius: 15px;
width: 15%;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div>
<a href='index.html'>
<img src="casa1.png" alt="" style="position:absolute; left:50px; top: 50px;"/>
</a>
<h1>Title</h1>
</div>
<div id="body">
<div id="container">
<h2>Sports</h2>
<p>Text here</p>
</div>
<div id="container">
<h2>Informatics</h2>
<p>Text here</p>
</div>
<div id="container">
<h2>Arts</h2>
<p>Text here</p>
</div>
</div>
</body>
我为所有
bodycontainerdiv<body>bgcolorbody<body bgcolor="#849edb">