如何让段落文本显示在居中标题下方而非停留在页面左侧

问题原因 #

你写的CSS规则存在两处错误，导致段落没有按预期显示：

• .p1选择器下的position: 80px 20px是无效属性值：position属性仅支持static、relative、absolute、fixed这类定位类型值，无法直接填写边距数值，你要的偏移效果应该用padding（内边距）或margin（外边距）实现。
• 没有给段落设置对齐规则，浏览器默认段落文本左对齐，所以才会固定停在页面左侧。

修正后的完整代码 #

<head>
<script src="https://kit.fontawesome.com/725ade08c4.js" crossorigin="anonymous"></script>
<style>

body {
padding: 0;
margin: 0;
background: #ffd200;
}

h1 {
font-size: 10em;
text-align: center;
font-family: 'arial';
margin-bottom: 20px; /* 控制标题和下方段落的间距，可按需调整数值 */
}
.p1 {
font-family: 'serif';
/* 替换错误的position属性，设置顶部间距80px，左右自动居中 */
margin: 80px auto 0;
width: 90%; /* 自定义段落宽度，避免宽屏下文本太长影响阅读，可改成固定值比如800px */
text-align: center; /* 文本居中对齐和标题样式统一，不需要可以删掉这行 */
}
</style>
</head>
<body>

<div class="container">
<a href="would be link"><i class="fas fa-home fa-2x"></i></a>
</div>

<h1>lorem ipsum</h1>

<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Nullam gravida a libero non pulvinar.
Nunc mi mi, hendrerit nec rhoncus ac, luctus eget mi.<br>Praesent eget tristique sapien.
Maecenas egestas leo vel consectetur placerat. </p>
</body>

内容的提问来源于stack exchange，提问作者Andrew Mercurio