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

Question

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

这是HTML：

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

我也做了jsFiddle illustrating the issue。

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

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

Answer 1

控制inline元素的大多数维度将不起作用，通常不受支持（它将直接违背内联的意图）。您必须将display修改为inline-block或block。

Answer 2

您正在寻找line-height财产。这决定了文字+底部顶部的高度。另外，请考虑将图像用作背景图像，如：url('<img_url>') no-repeat left center？这也使图像居中，并且您将布局分开（因为此图像仅适用于样式）

所以：跨度需要48px的行高才能获得正确的高度。

Answer 3

创建一个div作为计划单词的容器。

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

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

计划事物应该是垂直居中的，水平居中只是文本对齐：居中于.container。您应该使用

而不是我想。此外，如果你只是想与img对齐，你可以通过这种方式在img上强制对齐并强制对齐，无视你的额外顶部/底部空白。