0

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

在此处输入图像描述

这是HTML：

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

我还做了一个jsFiddle 来说明这个问题。

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

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

4

3 回答 3

1

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

于 2012-10-10T13:27:27.530 回答
0

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

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

于 2012-10-10T12:54:32.253 回答
0

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

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

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

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

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

于 2012-10-10T16:35:24.407 回答