在 Wordpress 中并排放置两张带标题的图片并居中

Question

这让我简直要疯了。我对 CSS 不是最有经验，所以我希望它是简单的。

我正在运行带有“The Morning After”主题的 Wordpress 2.9.2。

我正在尝试写一篇文章，我想在页面中间并排显示两张带标题的小图片。

这是我用来显示图像的 HTML 代码：

[caption align="alignnone" width="150" caption="Protein rest"]
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg">
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" />
</a>[/caption]
[caption align="alignnone" width="143" caption="Saccharification rest" captionalign="center"]
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg">
<img  title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" />
</a>[/caption]

我尝试使用“aligncenter”和“alignleft”作为标题对齐 - 如果我使用“alignleft”，图片会完美排列，但一直到页面的左侧。如果我使用“aligncenter”，则图片位于中心，但一张叠放在另一张上面。

我的第一个想法是使用以下方法将图像包装在 div 中：

<div style="text-align:center;">image code</div>

但这行不通。现在，如果我像这样包裹在居中的 div 中并省略 [caption] 标签，它就可以工作，但我需要标题。这些标题标签由 Wordpress 翻译成它自己的 wp-caption 类的 div。我还尝试将每个单独的图像包装在以父为中心的 div 包装器中自己的 div 中。

以下是 style.css 的相关部分 - 如果您需要任何其他信息，请告诉我，如果您能帮助我，我将推迟从最近的桥上跳下去！

谢谢！！

样式.css：

.aligncenter, div.aligncenter { display: block; margin: 14px auto; }
.alignleft { float: left; margin: 0 14px 10px 0; }
.alignright { float: right; margin: 0 0 10px 14px; }
.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px;  -webkit-border-radius: 3px; border-radius: 3px; }
.wp-caption img { margin: 0; padding: 0; border: 0 none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 14px; padding: 5px 4px 5px 5px; margin: 0; }

PS - 我知道 WordPress 中提供了 Gallery 功能，但想避免使用它，并且很想了解为什么包装在 div 中不会将整个套件移动到中心。

最后，为了完整起见，下面是使用上面的 div 包装器和图像代码加载时的页面源代码（这样您就可以看到 WordPress 如何翻译标题标签）：

<div style="text-align:center;">
<div class="wp-caption alignnone" style="width: 160px">
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg">
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" />
</a>
<p class="wp-caption-text" style="text-align:center">Protein rest</p>
</div>
<div class="wp-caption alignnone" style="width: 153px">
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg">
<img  title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" />
</a>
<p class="wp-caption-text" style="text-align:center">Saccharification rest</p>
</div>
</div>

Answer 1

我不确定你是否在寻找

1. 使用标题和 html 代码通过 WordPress 编辑器进行快速修复
2. 通过 Wordpress html 编辑器手动重新创建标题代码的快速修复
3. 通过functions.php文件和wp-includes/media.php中的add_shortcode()进行永久修复
4. 通过 CSS 进行的永久修复可能会影响所有标题。

我给 1 尽可能保持你的代码不受影响

<div style="text-align:center;">
// This should align the entire block [it worked for me at least]
    <div style="display:inline-block;">
        <div style="float:left;">
        // Takes care of the centering down the middle
            [caption align="aligncenter" width="150" caption="Protein rest"]
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg">
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" />
</a>[/caption]
        //Your caption code above with alignnone changed to aligncenter
        </div>
        <div style="float:left;">
            [caption align="aligncenter" width="143" caption="Saccharification rest" captionalign="center"]
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg">
<img  title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" />
</a>[/caption]
        </div>
    </div> // End the Block Div
</div> // End the Center Div

[编辑：刚刚看到你自己回答了 -.- 无论如何发布：D]