在 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

不确定两次回答我自己的帖子是否正确（！）但我想把这段代码放在那里以防它帮助其他人。

这是一个自定义函数（粘贴到您的 Wordpress 主题的 function.php 文件中）和随附的 CSS 元素，可让您使用简码将两个图像并排放置并左、右或居中对齐（默认如果未指定对齐方式，则为中心）。

它被编码为两个图像，但可以轻松修改以处理更多图像。它还要求您在图像上使用 [caption] 标签，因为这是我需要它的用途（以及它的字符串拆分的内容），但我可能会在以后充实它以处理不同的情况。

基本上，它会解析新 [side_by_side] 标记之间的图像代码并将其拆分到 [/caption]，创建一个数组，其中每个元素都是一个图像。它解析宽度（因为每个图像标签都指定了两个宽度 - 标题和实际图片 - 它检查哪个更大并使用那个），然后生成带有适当大小的 div 的代码。

显然，这不是一个“包罗万象”的解决方案，否则我会将其作为插件上传！它是为我非常具体的需求而编码的，但可以通过一些重新编码来根据您的具体需求进行修改。在我的祝福下使用，我对它可能对您的网站造成的影响不承担任何责任 :) PS - 我知道使用正则表达式通常是解析 html 的错误形式，但就我而言，这是一项如此小的小规模工作，我没有认为这将是一个问题。如果有人想优化/重新编码，请告诉我，我今天只是自学了足够的 PHP 来做到这一点，绝不是专家......

/* CUSTOM FUNCTION ADDED BY JIM - 5/20/2010 TO ALLOW CENTERING SIDE-BY-SIDE IMAGES */

add_shortcode('side_by_side', 'side_by_side');

function side_by_side($attr, $content = null) {

extract(shortcode_atts(array(
    'align' => 'center'
), $attr));

$images = explode( "[/caption]", $content, -1);
foreach($images as &$image)
{
    $image = $image.'[/caption]';
}

$img = array();
foreach($images as $img_tag)
{
preg_match_all('/width=\"(.*?)\"/i', $img_tag, $img[$img_tag]);
}

$widths = array();

for ($i = 0; $i < count($images); $i++)
{
    $firstval = $img[($images[$i])][1][0];
    $secondval = $img[($images[$i])][1][1];
    if ($firstval >= secondval)
        $widths[$i]=$firstval;
    else
        $widths[$i]=$secondval;
}

return '<div class="main-img-wrap wrap' . esc_attr($align) . '" style="max-width: ' . (24 + (int) $widths[0] + (int) $widths[1]) . 'px"><div class="sub-img-wrap" style="width: '
. (12 + (int) $widths[0]) . 'px">' . do_shortcode( $images[0] ) . '</div><div style="margin-left: ' . (12 + (int) $widths[0]) . '">' . do_shortcode( $images[1] ) . '</div></div>';
}

还有 CSS 元素：

/* centered side-by-side image wrappers, added by Jim 5/20/2010 */

.main-img-wrap {} /* left blank for future style enhancements */
.sub-img-wrap {float: left;}
.wrapcenter {margin: 0 auto;}
.wrapright {float: right; margin: 0 0 10px 14px;}
.wrapleft { float: left; margin: 0 14px 10px 0; }

Answer 2

我不确定你是否在寻找

1. 通过 Wordpress 编辑器使用标题和 html 代码快速修复
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]

Answer 3

好吧，经过一番折腾，我终于让它工作了。

我创建了一些新的 CSS 元素如下：

.stackwrapper {max-width: 311px;margin: 0 auto;}
#div1 {width: 162px;float: left;}
#div2 {margin-left: 162px;}

意识到这只是为了满足我的即时需求而编写的，因此对于我正在处理的帖子，宽度是硬编码的。基本上，一张图片是 150 像素宽，另一张是 137 像素。标题代码为每个添加了 5 像素的填充和 1 像素的边框，因此我的并排图像的总宽度为 311 像素（图像宽度 + 每张图像 10 像素左右填充 + 每张图像 2 像素左右边框）。

包装器设置为这个宽度，margin:0 auto 似乎将它居中（虽然不完全确定为什么......有人能告诉我吗？）

然后我将 image1 包装在 div1 中（图像+填充+边框宽度），将 image2 包装在 div2 中（margin-left 设置为第一个图像的宽度）

似乎工作得很好，现在我需要用 wordpress 短代码对其进行编码，以便我可以指定图像宽度并让它即时生成 html。

感谢 Gale，让我开始思考如何设置宽度。

Answer 4

您可能遇到的问题是 div 容器就像一个自动调整大小的框。因此，当您告诉它对齐中心时，它会自动注意到它应该向下伸展（因为那是页面流），如果您给 div 容器设置宽度，然后将图像放在 div 容器内并使 div 居中在页面上它会做你想做的事。根据您的代码，这是 html 中的一个小 sn-p：

<center>
<div width="300">
<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>
<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>
</div>
</center>

我知道您正在寻找 CSS，但这需要更长的时间，而我只是在工作中走出大门。

希望这对您有所帮助，祝您好运。 -大风