水平居中跨度元素答案

【问题标题】：Horizontal center a span element水平居中跨度元素
【发布时间】：2015-05-28 00:12:35
【问题描述】：

我正在使用 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”。底部的图像是我要居中的图像。

谢谢！

【问题讨论】：

jsfiddle Adam 中似乎只有两张图片。上中下图是哪一张？？
<center> 已被弃用，不再在 HTML5 中使用。此外，将所有内联样式提取到适当的样式表会很有帮助
target="new" 应该是 target="_blank"

标签： html css image center

【解决方案1】：

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

【讨论】：

那为什么不用<div> 而不是<span>呢？
<div>s 是块级的。我会使用<div>。 OP的问题指定使用<span>。
我也会使用<div>，但你是对的，帖子是关于<span>。
使用<div> 代替<span> 是答案。我还没有真正了解内联元素和块级元素之间的区别。谢谢！