HTML文本对齐异常排查：除Troll Malayalam标题外其余文本居中原因

问题原因 #

• 全局p标签样式错误污染：你朋友编写的CSS里设置了全局的p标签规则p { display: inline-block; float: left; line-height: 50px; padding-left: 5px; }，这个规则会作用于页面所有p标签。如果你的页面根元素（html/body）存在全局text-align: center的默认样式，inline-block属性的元素会继承父级的居中对齐规则，导致下方的版权p标签居中，而标题Troll Malayalam是用span标签实现的，不受p标签规则影响，所以对齐正常。
• 浮动未清除导致排版错乱：footer_cnt容器内的图片和标题都加了float: left属性，浮动元素会脱离正常文档流，但父级.footer没有做清除浮动处理，导致后续的p标签、图片等元素的排版逻辑被浮动干扰，你给p标签加的align="left"是HTML废弃属性，优先级远低于CSS规则，不会生效。
• 多余的全局规则冲突：你朋友编写的.text类规则和全局p标签规则完全重复，属于冗余代码，进一步增加了样式冲突的概率。

修复方案 #

1. 移除全局p标签的CSS规则，因为你的标题使用span.text类实现，根本不需要全局修改p标签样式，这个是核心错误点。
2. 给.footer容器加清除浮动样式，避免浮动影响后续元素排版，新增CSS如下：

.footer::after {
  content: "";
  display: block;
  clear: both;
}

3. 给下方的版权p标签添加专属类名，明确设置对齐规则，不要使用废弃的align属性：

<!-- 修改HTML部分 -->
<p class="copyright">
  SED ആക്കിയല്ലോ <br />
  © A k H i L (Troll Malayalam)
</p>

/* 新增对应CSS */
.copyright {
  display: block;
  float: none;
  text-align: left;
  line-height: 1.5; /* 可按需调整行高，不要沿用全局p的50px行高 */
  margin: 10px 0; /* 可按需调整外边距 */
}

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