• 原森林之家(foresthouse.cn)改为走私范(zousifan.com),只是改个名内容不变。
  • 网站图片自建立开始到19年全部丢失,血的教训时刻备份,多点备份!

一段小代码实现CSS图片居中

心得笔记 8年前 (2016-03-21) 1178次浏览 0个评论 扫描二维码
本文最后更新于2022年7月9日,已超过 1 年没有更新,如果文章内容失效,请 反馈 给我们,谢谢!


其实就在一个大的DIV里面让所有的图片居中只是一个小功能发现网上全是长篇大论,头都看晕了最后总结一下一句小代码搞定:

这里以一段代码为例:

<div id="内容区域开始"> 
 {dede:field.body/}
 </div>
相信玩得溜的童鞋一眼就能看出来上面代码表示的是织梦内容页的格式,那么在这个内容而里面有文字也有图片,我只想让图片居中显示要怎么做呢?很简单代码如下:
<div id="内容区域开始">
 <div class="控制图片">
 {dede:field.body/}
 </div>
 </div>
最后在CSS里面加入这样的代码:
.控制图片 img{display:block; margin:0 auto;}
好了简简单单两步就搞定了。

2016年03月25日更新:

经过实验发现这种情况不能尽善尽美,有人说可以用JSS控制但是这样会在图片显示以后才会变过来,这样并不完美,怎么只用CSS一步到位完美得解决图片太大的问题呢,接下来又分享一个方法很小的一个小代码也是亲测,代码如下:
.article-content {MARGIN: auto;WIDTH: 745px;}
.article-content img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 745 ? "745px" : this.width)!important;}

代码解释:

这是以织梦为例我的html源码是这样的:
<div class="article-content fontSizeSmall BSHARE_POP">
 {dede:field.body/}
<p><strong>转载请注明出处。</strong></p> </div>
其实只要是织梦系统都有一个标签:

{dede:field.body/}

这是文章页的标签,模版千千万万不可能DIV都是一样的按照上面的方法替换一下CSS里的代码就可以了。也可以直接在文章而的标签上再加一个DIV取名为“img”或者“bigimg”等然后CSS就用这个新加的DIV。
上面代码中的745就是最大的文章宽度可以自己对着文章大小自行设置。

总结:

这样才是最完美的方便简单,网上教程千千万完全一模一样试了N个也达不到我要的这种效果,最差的是使用JS的方法。以上代码虽然简单但功能强大一步到位是控制图片超出BODY的CSS首选代码。

版权所有丨如未注明 , 均为原创丨本网站采用 BY-NC-SA 协议进行授权 , 转载请注明 出处!
喜欢 (3)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
    仅用来给您发送回复提醒。不会公开!
  • 网址