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中。

以下是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

我不确定您是否在寻找

使用标题和html代码通过Wordpress编辑器进行快速修复
通过Wordpress html编辑器快速修复手动重新创建字幕代码
通过functions.php文件和wp-includes / media.php中的add_shortcode（）进行永久性修复
通过CSS进行永久性修复，可能会影响所有字幕。

我尽量保持你的代码不受影响

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

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

Answer 3

好吧，经过多次搞乱后，我终于明白了。

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

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

意识到这只是为了满足我的直接需求而进行编码，所以宽度是我正在处理的帖子的硬编码。基本上，一个图像宽150px，另一个图像是137px。字幕代码为每个添加5px填充和1px边框，因此我的并排图像的总宽度为311px（图像宽度+ 10px L＆amp; R填充每个图像+ 2px L＆amp; R边框每个图像）。

包装器设置为此宽度，边距：0自动似乎居中（尽管不完全确定为什么......有人能提醒我吗？）

然后我将div1中的image1（带有图像+填充+边框宽度）和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; }

将两个带有字幕的图片并排堆叠在Wordpress中心

4 个答案: