Divi Builder图片对齐失效主因是text-align对block元素无效，推荐用display: flex; justify-content: center;并兼顾响应式断点与vertical-align问题。
Divi Builder里图片对齐不生效，先查CSS优先级
Divi自带的图片模块对齐选项（比如“居中”“右对齐”）本质是给.et_pb_image容器加text-align，但只对内联元素（如<img alt="HTML怎么用Divi Builder写图片对齐代码_Divi主题自定义CSS对齐" >）起作用；如果图片被包在div或设置了display: block，text-align就失效了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，检查图片实际渲染后的
display值——常见坑是Divi自动加了display: block，让text-align彻底无效 - 不用依赖模块面板里的“对齐”下拉菜单，直接在模块设置 → “高级” → “自定义CSS” → “主元素”里写
text-align: center，比模块选项更可靠 - 若图片是响应式（比如用了
max-width: 100%），记得同时加height: auto，否则某些缩放下会错位
用自定义CSS强制图片水平居中（block级也管用）
最稳的方式是绕过text-align，改用Flex布局。Divi模块的主元素默认不是flex容器，所以必须手动设。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在模块“高级”→“自定义CSS”→“主元素”里填：
display: flex; justify-content: center; - 如果图片上下有空白，大概率是
margin或line-height残留，加一句align-items: center;能一并压平垂直偏移 - 慎用
margin: 0 auto：它只对width明确的block元素有效，而Divi图片默认没设width，容易失效
响应式图片对齐在手机端失效怎么办
Divi的“桌面/平板/手机”三级断点里，图片对齐样式经常只配了桌面端，切到手机视图时回归默认左对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别只在“桌面”标签页写CSS，在“手机”标签页里单独补一行
display: flex; justify-content: center; - Divi手机断点宽度是
max-width: 980px，但真实手机可能更小；如果想覆盖所有小屏，直接在“主元素”里写带@media的规则，比如：@media (max-width: 767px) { display: flex; justify-content: center; } - 避免用
float做对齐——Divi 4.0+已弃用float布局，且和flex混用极易冲突
图片和文字混排时对齐错乱的根源
当图片模块和文本模块并排（比如用Divi的“行”+“列”），常出现图片下沉、文字上浮。这不是对齐问题，而是vertical-align默认值baseline惹的祸。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 选中图片模块 → “高级” → “自定义CSS” → “主元素”，加
vertical-align: top;或vertical-align: middle; - 如果用了Divi的“图标模块”或“计数器模块”跟图片同行，它们内部也带
vertical-align: baseline，得一并覆盖 - 不要试图用
margin-top硬调——不同字体、字号下偏移量完全不同，维护成本高
真正麻烦的不是写哪行CSS，而是Divi会在不同层级（主题设置、页面设置、模块设置、全局CSS）重复注入样式，优先级打架时连!important都救不回来。动手前先用开发者工具看最终计算出的display和justify-content值，比猜强得多。
