水平居中 span 元素

Question

我正在使用 span 元素为带有标题的图像创建容器。我想将图像居中放在它自己的行上，就像我使用

和将图像居中一样。当我将跨度容器与 "float" 一起使用时，它可以工作，但是一旦我删除 "float" 属性，我就无法再设置跨度宽度。

    <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
顶部图像是我正在寻找的结果，减去容器。中间的图像显示带有标题的容器，使用 "float:left"。底部图片是我要居中的图片。

谢谢！

Answer 1

<span> 是一个 'inline' 元素。您试图将其视为 'block-level' 元素。添加 float: left; 强制它变成 'block-level'，然后您可以应用 width: 100%; text-align: center; 之类的东西使图像居中。 float: left; 的替代方法是在 span 标签上设置 display: inline-block;。但是，这给您留下了几乎相同的情况...您需要添加 width: 100%; text-align: center; 以使嵌套图像居中。

水平居中 span 元素

Horizontal center a span element

html

css

image

center