请选择 进入手机版 | 继续访问电脑版

我爱自学

 找回密码
 会员注册

QQ登录

只需一步,快速开始

Discuz论坛帖子内容图片水平居中的实现方法

通过Discuz运营网站,想要实现文章中图片水平居中该怎么办?如果每次发帖,手动在编辑器中修改图片居中样式,这样是费力不现实的。本文分享通过修改代码实现discuz帖子文章图片水平居中。
如下图所示,Discuz论坛默认发的帖子,是靠左对齐的。尝试通过Css text-align:center的样式控制图片水平居中,但是没有效果。

Discuz论坛帖子内容图片水平居中的实现方法

Discuz论坛帖子内容图片水平居中的实现方法


最后实现方法:修改2处Discuz文件

文件位置: template/default/forum/discuzcode.htm和 template/default/common/module.css。 如果你已经修改了模板,请打开对应模板的上述文件。
修改的方法:

1、找到258行以下代码:
<img{if $attach['price'] && $_G['forum_attachmentdown'] && $_G['uid'] != $attach['uid']} class="attprice"{/if} style="cursor:pointer" id="aimg_$attach[aid]" aid="$attach[aid]" src="{STATICURL}image/common/none.gif" zoomfile="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode&noupdate=yeshumb=yes{else}{$attach[url]}$attach[attachment]{/if}" file="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode{else}{$attach[url]}$attachthumb{/if}" inpost="1"{if $_GET['from'] != 'preview'}{/if} />

修改为:
<div style="text-align:center;"><img{if $attach['price'] && $_G['forum_attachmentdown'] && $_G['uid'] != $attach['uid']} class="attprice"{/if} style="cursor:pointer" id="aimg_$attach[aid]" aid="$attach[aid]" src="{STATICURL}image/common/none.gif" zoomfile="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode&noupdate=yeshumb=yes{else}{$attach[url]}$attach[attachment]{/if}" file="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode{else}{$attach[url]}$attachthumb{/if}" inpost="1"{if $_GET['from'] != 'preview'}{/if} /></div>

2、找到260行的以下代码:
<img{if $attach['price'] && $_G['forum_attachmentdown'] && $_G['uid'] != $attach['uid']} class="attprice"{/if} id="aimg_$attach[aid]" aid="$attach[aid]" src="{STATICURL}image/common/none.gif" zoomfile="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode&noupdate=yeshumb=yes{else}{$attach[url]}$attach[attachment]{/if}" file="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode&noupdate=yes{else}{$attach[url]}$attach[attachment]{/if}" $widthcode id="aimg_$attach[aid]" inpost="1"{if $_GET['from'] != 'preview'}{/if} />

修改为:
<div style="text-align:center;"><img{if $attach['price'] && $_G['forum_attachmentdown'] && $_G['uid'] != $attach['uid']} class="attprice"{/if} id="aimg_$attach[aid]" aid="$attach[aid]" src="{STATICURL}image/common/none.gif" zoomfile="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode&noupdate=yeshumb=yes{else}{$attach[url]}$attach[attachment]{/if}" file="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode&noupdate=yes{else}{$attach[url]}$attach[attachment]{/if}" $widthcode id="aimg_$attach[aid]" inpost="1"{if $_GET['from'] != 'preview'}{/if} /></div>


文件修改后上传到你的服务器,更新缓存后查看文章,发现图片已经水平居中了。

但是又发现一个问题,本地上传的图片可以水平居中,但是上传的网络图片,仍然是靠左对齐。该如何解决这个问题呢?

游客,如果您要查看本帖隐藏内容请回复


通过在img标签外加一个div包裹配合text-align:center,实现网络图片水平居中显示。



点击阅读更多内容!
如果您觉得文章内容帮助到了您,不妨点点感兴趣的广告。感谢您的支持!

微信扫一扫打赏

回复

使用道具 举报

111111111111
发表 delete 发表于 2023-11-12 16:51:14
回复

使用道具 举报

帖子内容图片水平居
发表 boonkiong 发表于 2023-9-24 08:52:02
回复

使用道具 举报

sdaaaaaaaaaa
发表 gcxxw189 发表于 2023-8-9 00:21:53
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

手机版|小黑屋|我爱自学 ( 蜀ICP备19015358号-3 )

GMT+8, 2024-5-19 16:14 , Processed in 0.054912 second(s), 57 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

本站大部分教程是网站原创教程,一部分教程为我爱自学(http://www.5izixue.com)编辑收集整理。

如果您需要转载我爱自学网站教程,请注明“资料来源:我爱自学(5izixue)”字样并注明本站网址。

编辑收集整理的教程版权归原作者所有,本站只提供网友交流学习使用,请勿用于商业用途,如果该文章有任何侵犯您权益的地方,请联系我们(569705694@qq.com),我们将在第一时间进行处理!谢谢您的支持!

快速回复 返回顶部 返回列表