如何使用HTML div与样式实现WordPress页脚块居中对齐

问题原因 #

• 你的HTML代码存在语法错误：align="center 缺少闭合的双引号，会导致浏览器无法正确识别后续的style属性，你写的flex布局样式完全没有生效，所以块还是默认靠左对齐。
• 可能存在WordPress主题自带的页脚样式冲突：部分主题的页脚区域默认设置了浮动、固定宽度、内边距/外边距、对齐规则，会覆盖你手动写的元素样式。

解决步骤 #

1. 先修正HTML语法错误，同时补充必要的居中适配属性，修改后代码如下：

<div align="center" style="width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;">

这里补充的width: 100%是让容器占满页脚整行宽度，避免容器宽度不足导致看起来靠左；align-items: center是确保flex容器内的所有子元素也能居中对齐。
2. 如果修正语法后还是无法居中，说明主题样式优先级更高，可通过自定义类名加更高优先级的样式解决：

• 给该块加自定义类名，HTML修改为：

<div class="footer-center-block" style="width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;">

• 进入WordPress后台，打开「外观-自定义-额外CSS」，添加如下样式：

.footer-center-block {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  float: none !important;
  margin: 0 auto !important;
}

!important用于强制覆盖主题自带的默认样式，float: none用于消除可能存在的浮动影响，margin: 0 auto是额外补充的块级元素居中保险规则。

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