如何在 span 元素中垂直对齐文本，或使 span 与文本大小相同？答案

【问题标题】：How can I vertically align text within a span element, or make the span the same size as the text?如何在 span 元素中垂直对齐文本，或使 span 与文本大小相同？
【发布时间】：2012-10-11 00:35:24
【问题描述】：

这似乎是一个非常基本的问题，但我无法在任何地方找到答案。在下图中，“Schedule”一词位于跨度内的跨度中。蓝色框不是 CSS 的一部分，它是 Firebug 高亮矩形，显示了外部跨度的尺寸。

这是 HTML：

<span class="caption">
  <span class="green">Schedule</span>
</span>

我还发了jsFiddle illustrating the issue。

两个跨度都没有填充或边距，只有一些尺寸和颜色信息。字体大小为 48px，但 span 高度计算为 65px，并且文本在此 span 中垂直居中，导致文本顶部与单独的 HTML 元素中的时钟图标不对齐。

问题是：为什么跨度比它包含的文本高，我怎样才能（1）使它们具有相同的大小，或者（2）在跨度的顶部对齐文本。我想强调的是，我不是以这种方式设置跨度高度； Firefox 正在这样做，并且不涉及填充或边距。

【问题讨论】：

请提供一个演示来说明问题。 jsFiddle 更可取。
好主意！请参阅 jsFiddle 链接的更新问题。

标签： html css

【解决方案1】：

控制inline 元素的大部分尺寸不会产生任何影响，并且通常不受支持（这将直接违背内联的意图）。您必须将display 修改为inline-block 或block。

【讨论】：

我理解你对内联的意思，但问题不是我试图破坏布局，而是元素比它应该的要大，所以布局看起来错误的。为什么浏览器会像这样在元素上添加填充？
它主要由 line-height 控制，但只是松散的。如果您真的想要所有详细信息：w3.org/TR/CSS2/visudet.html#q15。底线是，如果您想对原始内联元素占用的空间进行精细控制，请使用 inline-block。
好吧，我仍然不确定我是否完全理解发生了什么，因为 w3.org 不是最轻松的读物，但你给了我批判性的建议。我在该外部跨度上设置了 display:inline-block 并设置了 line-height:35px。我真的不明白为什么需要将 line-height 设置为这个幻数才能使其工作，但它确实使它看起来正确。谢谢！
我想我已经更新了链接以更具体。特别令人担忧的是：w3.org/TR/CSS2/visudet.html#inline-non-replaced

【解决方案2】：

您正在寻找line-height 属性。这决定了文本的高度 + 底部顶部。另外，请考虑将图像用作背景图像，例如：url('<img_url>') no-repeat left center?这也使图像居中，并且您将布局分开（因为此图像纯粹是为了风格）

所以：span 需要 48px 的 line-height 才能获得正确的高度。

【讨论】：

我试过这个，它把整个跨度向上移动了一点，但不足以对齐，计算出的跨度高度仍然是 65px。图片只是用来说明我的布局问题，但与跨度/文本问题无关，因为它位于一个完全独立的元素中。

【解决方案3】：

制作一个 div 作为您的日程安排词的容器。

.container
{
display: table;
height: 200px;
width: 100px;
}

.scheduleThingaMaJig
{
display: table-cell;
vertical-align:middle;
}

日程安排的东西应该垂直居中，水平居中只是 text-align: center on .container。你应该使用

而不是我想的。此外，如果您的目标只是与 img 对齐，则可以在 img 上添加一个维度并强制对齐，而无需按计划进行额外的顶部/底部空白。

【讨论】：