HTML新手求助：设置body的text-align:center后h3标题仍无法居中对齐

嘿，我来帮你搞定这个对齐问题！你遇到的情况其实很常见——虽然给body设置了text-align: center，但h3还是左对齐，核心原因出在你给h3加的固定宽度上，我来一步步给你拆解：

问题根源 #

text-align: center这个属性的作用是让元素内部的行内元素/文字居中，而不是让元素自身在父容器里居中。你给h3设置了width: 200px，它就变成了一个有固定宽度的块级元素，块级元素默认会靠左排列在父容器里，所以即便body设置了text-align: center，也只会让h3内部的文字居中，但h3这个盒子本身还是左对齐的。另外你的h3样式里padding: 40没加单位，浏览器可能会解析出错，记得补上px哦。

解决方案 #

要让带固定宽度的块级元素水平居中，只需要给h3加上margin: 0 auto就行——这个属性会让元素的左右外边距自动分配，把元素挤到父容器的中间位置。

修改后的CSS代码如下：

body{background-color: powderblue;} 
p{color: white;} 
body {text-align: center;} 
h1 {border: solid 5px; background-color: white;} 
h3{
    border-radius: 30px; /* 四个角值相同可以简写 */
    padding: 40px; /* 补上单位px */
    width: 200px; 
    background-color: purple;
    margin: 0 auto; /* 新增这行让h3自身居中 */
}

补充说明 #

• 如果你的h3没有设置固定宽度，它会默认占满父容器的宽度，这时候margin: 0 auto就起不到作用了，因为没有多余的空间让外边距分配。
• text-align: center依然可以保留，它会让h3内部的文字在盒子里居中，和margin: 0 auto的作用不冲突哦。

内容的提问来源于stack exchange，提问作者Tamlyn Bateman