wordpress中如何使插入文章中的图片居中显示？

wordpress中如何使插入文章中的图片居中显示呢？最近在使用wordpress时，遇到文章中插入图片，图片显示不居中的问题，究竟怎么回事呢？

 

在文章中，插入图片时，我明明用了编辑器中的居中显示了，何况在编辑器中，图片也显示居中，为什么文章发表后，前台显示时，图片却居左显示呢？在一般的站内发表文章时，还没发现这样的问题，难道这是wordpress的“bug”吗？我看了下源代码，便在源代码里，给图片加了个<p>标签，代码如：<p sytle="text-align:center"><img src="siyuan-seo.jpg" alt="SEO到底是什么？我们为什么要学习SEO？"/></p>, 心想这下应该没问题了吧，但结果并不理想，我强制刷新页面，图片还是居左显示，究竟是什么原因呢？不得已，向“百度大哥”咨询了下，把自己认为比较有效的解决此问题的方法【我自己亲自测试的，准确无误哦】记录了下来，借此分享给大家。

 

wordpress在文章中插入图片时，可分两种情况：

 

第一种：不带描述的图片

 

这种情况下，生成的图片代码如下：

<p style="text-align: center;">

<img height="154" width="366" alt="wordpress文章插入图片不居中显示" src="wp-ct.png" title="wordpress文章插入图片不居中显示" original="wp-ct.png.png" style="display: inline;">

</p>

 

这种情况可以理解为:图片被放在了一个段落标签<p>中，通过添加<p>标签的sytle属性text-align: center;，使图片居中显示,这样修改，图片可以正常居中显示。

　　第二种情况：文章中插入带描述的图片

　　这种情况下，生成的图片代码如下：

<div class="wp-caption aligncenter" style="width: 376px">

<img class=" " height="154" width="366" alt="alt" src="src.png" title="移除成功提示" original="original.png">

<p class="wp-caption-text">你的图片说明</p>

</div>

　　这种情况可以理解为：图片被放在了一个<div>中，此时，<div>被加上了class属性，而且样式中定义了宽度。这样我们就要在style.css中添加样式使图片居中。也就是说，如果发现在编辑文章时选中了图像居中却无法实现居中就是因为在样式表中没有为其定义样式。

　　这样，我们可以在wordpress后台中，依次点击“外观-编辑”，就会出现样式表，我们可以在样式表的最后一行加入以下样式代码：

.entry-content .wp-caption.aligncenter {clear: both;display: block;margin-left: auto;margin-right: auto;}

#coreContent .entry-content p.wp-caption-text {text-align: left;}

 

理论上，到此，我们就实现了图片居中显示，无论第一种情况还是第二种情况。但实际上我们发现第二种情况（图片添加了描述）出现图片和说明文字并不是严格左对齐的情况；当图片与body等宽时，图片还会超过body的边界。再仔细查看此时的HTML代码。你会发现，div标签强制定义了宽度，比实际的图片宽度大了一点，这就导致了图片在此div中居中时，会向右偏移。所以，我们必须使div宽度等于实际的图片宽度。

 

这个问题上，在 Wordpress Support中有人提出了三个解决方法（这里只介绍两种方法）：

 

方法一：修改wp-includes/media.php

 

将return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . (10 + (int) $width) . 'px">'这段代码中的“10”改为“0“；【这个方法，思源试过，可行】

 

方法二：修改CSS文件，添加如下代码

 

entry div.wp-caption {width: auto !important;} 【这个方法可能和其他CSS样式冲突，导致一些想不到的问题，不推荐】。

 

至此，wordpress中如何使插入稳重中的图片居中显示，相信大家有了大致的了解，下次再遇到这样的问题，相信已不是什么难事了。

web开发网http://www.software8.co/cms/wordpress/2028.html