WordPress文章图片居中的实现方法

WordPress发文章时总有个问题：文章中的图片总是不能准确居中。
先说一下，我添加文章图像的方法主要有两个：

• 不带“图像说明”，即在编辑图片时将“说明”字段留空。
• 带有“图像说明”，在编辑图片时填入“说明”字段，在文章中最终显示图片下的为一段描述。

在添加图像时会选择居中，可以看到在第一种情况下，产生的HTML内容为：

即图片被放在了一个段落标签<p>中，通过添加<p>标签的sytle属性text-align: center;，使图片居中显示。
而在第二种情况（带有图片说明文字）时，产生的HTML内容为：

可以看到，这时图片被放在了一个<div>中，此时，<div>被加上了class属性，而且样式中定义了宽度。这样我们就要在style.css中添加样式使图片居中。也就是说，如果发现在编辑文章时选中了图像居中却无法实现居中就是因为在样式表中没有为其定义样式。
我使用如下CSS代码实现图片居中和说明文字与图片左对齐：

理论上，至此我们就实现了图片居中显示，无论是否添加了说明文本。
但实际上我们发现第二种情况（添加了说明文字）出现图片和说明文字并不是严格左对齐的情况；当图片与body等宽时，图片还会超过body的边界。再仔细查看此时的HTML代码。我发现，div标签强制定义了宽度为376px，比实际的图片宽度大了10px，这就导致了图片在此div中居中时，向右偏移了5px。所以，我们必须使div宽度等于实际的图片宽度。
在Wordpress Support中有人提出了三个解决方法：

• 修改wp-includes/media.php。将这段代码
  return '<div ' . $id . 'class="wp-caption ' . $align. '" style="width: ' . (10 + (int) $width) .'px">'中的“10”改为“0”。
• 使用插件，原理同1。将此贴中的代码保存为单独的PHP文件放入Plugins文件夹并启用即可。
• 修改CSS文件，添加如下代码：
  .entry div.wp-caption {
  width: auto !important;
  }

第三种方法可能和其他CSS样式冲突，导致一些想不到的问题，不推荐使用。我采用的是第一种方法，快速简便，效果不错，推荐使用。