在 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 的相关部分 - 如果您需要任何其他信息，请告诉我，如果您能帮助我，我将推迟从最近的桥上跳下来！

谢谢！！

Style.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 中的 add_shortcode() 进行永久修复-includes/media.php
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 2

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

<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，但这需要更长的时间，而且我只是在工作中走出去。

希望这有帮助，祝你好运。
-大风

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 中（它的图像+填充+边框宽度）并且div2 中的 image2 （其 margin-left 设置为第一个图像的宽度）

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

感谢 Gale，你让我开始思考设置宽度的问题。

Answer 4

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

这是一个自定义函数（粘贴到您的 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; }