这让我非常疯狂。我不是最有经验的 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>