使用display:block时，如何居中作品集网站关于页的多个段落？

核心问题分析 #

你给段落设置了max-width:60%但没配置水平居中规则，用绝对居中会脱离文档流导致段落重叠，同时冗余的<br>标签会干扰移动端的布局间距。

具体解决方案 #

• 段落水平居中+自动换行：块级元素实现水平居中最稳妥的方式是设置margin: 0 auto，结合你已有的max-width:60%，既能限制文本宽度，又能让段落整体居中，同时保留自动换行特性（display:block是<p>标签默认属性，可省略）。
• 标题居中：给标题IDcenterHeading添加text-align: center实现文字居中。
• 优化移动端体验：通过媒体查询，在小屏幕设备上增大段落宽度，避免文本过窄；同时移除多余的<br>标签，用Bootstrap的margin类控制段落间距即可。

修改后的代码 #

HTML代码

<div class="container mt-5 pt-5">
    <div class="row">
        <div class="col-md-12" id="introToCam">
            <h1 id="centerHeading"><b>About Me</b></h1>
            <p class="mb-5 mt-3">
                Text About Me
            </p>
            <p class="mb-5 mt-3">
                More Text About Me
            </p>
        </div>
    </div>
</div>

CSS代码

/* 段落样式 */
p{
    max-width: 60%;
    margin: 0 auto; /* 实现水平居中 */
    text-align: justify; /* 可选：让文本两端对齐，提升阅读体验 */
}

/* 标题居中 */
#centerHeading{
    text-align: center;
}

/* 移动端适配 */
@media (max-width: 768px) {
    p{
        max-width: 90%; /* 小屏幕下增大文本宽度 */
        text-align: left; /* 移动端可选左对齐，提升阅读舒适度 */
    }
}

补充说明 #

• margin:0 auto仅对块级元素生效，<p>标签默认就是块级元素，无需额外设置display:block。
• 移除<br>后，Bootstrap的mb-5（底部外边距）和mt-3（顶部外边距）已能保证合适的段落间距，避免移动端出现过大空白。
• text-align: justify可让桌面端文本两端对齐，美观度更高，移动端可通过媒体查询改回左对齐，适配小屏阅读习惯。

内容的提问来源于stack exchange，提问作者Cameron Branston