织梦文章图片为何不居中？-织梦建站-盈思创科技

问题根源分析

图片不居中的根本原因在于，织梦默认的文章内容区（通常是 article 或 arcitle-content 类的 div）没有定义 text-align: center; 属性，当你在编辑器中点击“居中”按钮时，编辑器可能会生成 <p style="text-align:center;"><img ...></p> 这样的代码，但如果这个 p 标签的父容器（文章内容区）有 text-align: left;（左对齐）的样式,那么它就会覆盖掉子元素的居中样式。

（图片来源网络，侵删）

解决方案（按推荐顺序）

修改CSS样式（最推荐、最根本的解决方法）

这是最规范、最一劳永逸的方法，通过修改织梦的CSS文件,让所有在文章内容区内的图片默认居中。

找到CSS文件
- 登录你的网站后台。
- 进入“系统” -> “系统基本参数” -> “核心设置”。
- 找到 “网站默认风格模板目录” 和 “网站首页默认模板” 这两项,确认你的网站正在使用哪个模板。
- 通过FTP或你的主机文件管理器，进入 /templets/你的模板目录/ 文件夹。
- 在这个文件夹中找到 style.css 文件（有时也可能是 main.css 或其他名字，但通常是存放主要样式表的那个）。

添加CSS代码

用代码编辑器（如VS Code, Sublime Text, Notepad++）打开 style.css 文件。
在文件末尾添加以下代码：

/* 解决织梦文章图片不居中的问题 */
.article-content {
    text-align: center; /* 让文章内容区的所有子元素（包括图片）默认居中 */
}
/* 如果上面的代码无效，尝试下面的写法，它更具体地定位img标签 */
.article-content img {
    display: block; /* 将图片转为块级元素，以便使用margin */
    margin: 0 auto; /* 左右外边距自动，实现水平居中 */
}

如何选择代码？
（图片来源网络，侵删）
- 优先使用第一种（.article-content { text-align: center; }）：这是最简单的方法，它会将文章内容区内的所有文字、图片等都居中，如果你的文章标题和正文也希望居中,这是最好的选择。
- 如果第一种导致文字也居中（你不想这样），请使用第二种（.article-content img { ... }）：这个代码只针对图片生效,不会影响文字的对齐方式。
保存并刷新网站
- 保存 style.css 文件，然后刷新你的网站前端页面,看看图片是否已经居中。

注意：如果你的文章内容区使用了其他class名（content, post 等），你需要将代码中的 .article-content 替换成你实际的class名，你可以在浏览器中“检查”文章图片元素,找到它的父容器class名。

修改编辑器默认样式（针对UEditor编辑器）

如果你的网站使用的是 百度的UEditor编辑器（这是新版织梦默认的编辑器）,你可以在编辑器内部设置默认图片对齐方式。

登录织梦后台。
进入“系统” -> “系统基本参数” -> “核心设置”。
找到 “编辑器” 选项，确保你使用的是 ueditor。
模型” -> “内容模型管理”。
点击你文章所使用的模型（通常是“文章”模型）后面的“更改”按钮。
在模型设置页面，找到 “内容摘要字数” 下面的 “内容载入标签”，在后面的文本框中输入 <p>。
关键步骤：点击页面底部的“保存”按钮后，系统会跳转到UEditor的配置页面，在这个页面的顶部，你可以找到UEditor的配置选项，找到类似 initialStyle 的字段，在它的值里添加CSS代码。
- 在 initialStyle 的值中输入：p{text-align:center;}
保存设置，这样，你在编辑器里插入的图片，其所在的 <p> 标签就会默认是居中的。

手动修改文章内容（临时方法）

如果你只是想让某一篇或几篇特定的文章图片居中，不想影响全局,可以直接修改文章内容。

（图片来源网络，侵删）

在后台“内容发布”中找到那篇文章，点击“修改”。
切换到“HTML源码”编辑模式（编辑器工具栏上通常有一个 </> 图标）。
找到图片代码 <img src="..." />。
在 <img> 标签内部添加 style="display:block; margin:0 auto;" 属性。
- 修改前：<img src="/uploads/2025/10/01.jpg" alt="示例图片" />
- 修改后：<img src="/uploads/2025/10/01.jpg" alt="示例图片" style="display:block; margin:0 auto;" />
点击“保存”,这样这张图片就会居中。

检查模板文件（较少见）

如果以上方法都无效，可能是你的文章内容模板（article_article.htm）文件被修改过,导致没有正确调用CSS或者结构有误。

通过FTP进入 /templets/你的模板目录/ 文件夹。
找到 article_article.htm 文件（文章详情页模板）。
用代码编辑器打开它，找到显示文章内容的那一行代码，它通常是这样的：
```
{dede:field.body/}
```
检查这行代码的上下文，确保它被一个 div 包裹，并且这个 div 有正确的class名（article-content）,并且这个class在CSS文件中是存在的。
如果模板文件被严重破坏，你可以从官方或其他地方下载一个默认的模板文件来覆盖,然后再进行修改。

总结与排查步骤

当你遇到图片不居中的问题时,建议按以下顺序排查：

首选方案一：修改CSS文件，这是最规范、最彻底的解决方法。
如果使用UEditor：尝试方案二,修改编辑器默认样式。
仅处理单篇文章：使用方案三,手动修改HTML代码。
全局样式无效：检查方案四,确认模板文件是否正确。

希望这些方法能帮助你解决问题！

织梦文章图片为何不居中？