Question

我使用span元素为带有标题的图像创建容器。我希望将图像置于其自身的线条中心，就像我使用＆lt; center＆gt;来居中图像一样。和＆lt; img＆gt;。当我使用带有＆＃34; float＆＃34;的span容器时，它可以工作，但是一旦我删除＆＃34; float＆＃34;属性，我不能再设置跨度宽度。

    <span class="imageholder" style="width:150px">
<a href="https://gallery.mailchimp.com/37f4256f7c29a1b3335eb535e/images/62f05d38-ae67-40d1-bf14-7773330b8169.jpg" target="new"><img src="https://gallery.mailchimp.com/37f4256f7c29a1b3335eb535e/images/62f05d38-ae67-40d1-bf14-7773330b8169.jpg" width="100%" alt="Roux and Mary at the Good Food Festival"></a>
    <span class="caption" style="width:150px">Roux and Mary at the Good Food Festival
    </span>
</span>

jsfiddle
顶部图像是我要找的结果，减去容器。中间的图像显示带有标题的容器，使用＆＃34; float：left＆＃34;。底部图像是我试图居中的图像。

谢谢！

Answer 1

<span>是一个＆＃39; inline＆＃39;元件。您试图将其视为“块级”＆＃39;元件。添加float: left;会强制它变为“块级别”，然后您可以应用width: 100%; text-align: center;之类的内容来使图像居中。 float: left;的替代方法是在您的span标记上设置display: inline-block;。这会让您的情况大致相同......您需要添加width: 100%; text-align: center;来嵌套嵌套图像。

水平中心是一个跨度元素

1 个答案: