网页段落无法顶部居中的问题排查及解决方案咨询

问题分析 #

你设置了.welcome1的text-align: center但未达到预期，核心原因有两个：

• 侧边栏sidebar的left属性缺失单位，导致固定定位无效，侧边栏占据页面左侧空间，挤压正文区域，让段落看起来没有居中；
• 若希望段落文本在可视区域内更美观地居中，还需要调整容器的宽度和外边距。

修复步骤 #

1. 修复侧边栏定位错误 #

修改CSS中.sidebar的left属性，补充px单位，让固定定位生效：

.sidebar {
    position: fixed;
    left: -250px; /* 补充px单位 */
    width: 250px;
    height: 100%;
    background: #042331;
}

2. 优化段落容器样式（可选，增强居中效果） #

如果希望段落不仅文本居中，整个容器也在页面水平居中并限制宽度，更新.welcome1的CSS：

.welcome1 {
    text-align: center;
    color: white; 
    background-color: #063146;
    padding: 1.5rem; /* 增加内边距，提升可读性 */
    max-width: 900px; /* 限制最大宽度，避免文本过长 */
    margin: 2rem auto; /* 上下外边距+水平自动居中 */
}

3. 修正HTML链接拼写错误 #

HTML中所有<a>标签的hrf是拼写错误，应改为href，否则链接无法正常跳转：

<li><a href="homepage.html"><i class="fas fa-home"></i>  Home</a></li>
<li><a href="project.html"><i class="fas fa-brush"></i> Project</a></li>
<li><a href="aboutus.html"><i class="far fa-question-circle"></i> About us</a></li>
<li><a href="contact.html"><i class="fas fa-envelope"></i> Contact</a></li>

最终效果 #

修复后，.welcome1内的段落文本会水平居中；若添加了容器居中样式，整个段落块也会在页面中间显示，同时侧边栏的固定定位恢复正常。

内容的提问来源于stack exchange，提问作者Brave-N8tion Official