React项目中Postlist组件下博客列表块级元素无法水平居中如何解决？

数据老陈

2026-10-1

问题原因

text-align: center 仅对父容器内的行内、行内块元素生效，你给.blog-element设置了display: block属性，属于块级元素，父容器的text-align配置对它不生效。
块级元素实现水平居中，需要给元素自身设置margin: 0 auto，仅给父容器添加该配置无效。

你之前导航栏用同样方法生效，是因为导航栏的子元素属于行内/行内块类型，和当前博客子元素的类型不同，所以适配逻辑有区别。

修复方案

修改PostList.css的代码即可，完全兼容后续动态生成的列表元素：

.blog-list-container {
    margin: 0 auto;
    /* 可按需添加容器最大宽度限制，例如 max-width: 1200px; 不设置则默认占满父容器宽度 */
}

.blog-element {
    display: block;
    width: 50%;
    margin: 0 auto; /* 新增该行实现块级元素水平居中 */
    padding: 60px 30px;
}