如何在span元素內垂直對齊文本，或使span與文本大小相同？

Question

這似乎是一個非常基本的問題，但我在任何地方都找不到答案。 在下圖中，單詞“ Schedule”在跨度內。 藍色框不是CSS的一部分，它是Firebug高亮矩形，顯示了外部跨度的尺寸。

這是HTML：

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

我還做了一個jsFiddle來說明這個問題 。

兩個跨度都沒有填充或邊距，只有一些尺寸和顏色信息。 字體大小為48px，但跨度高度計算為65px，並且文本在該跨度中垂直居中，導致文本頂部與時鍾圖標（在單獨的HTML元素中）不對齊。

問題是：為什么跨度比其包含的文本高，我怎么能（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上標注尺寸，然后以這種方式強制對齊，而不必按計划忽略多余的頂部/底部空白。