css - 并排堆叠两张带有标题的图片并在 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 中可用的画廊功能，但想避免使用它，并且很想了解为什么包装在 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]