Html 内联块元素具有不同的垂直对齐方式

我需要得到一个链接后的图标链接

例如：

Link [icon]

我想要的线高是30px。因此，我有这样一个标记：

<div class="phone-support">
   <a href="#">We'll call you</a><i class="icon"></i>
</div>

.phone-support a {
   display       : inline-block;
   line-height   : 30px;
   padding-right : 5px;
   height        : 30px;
}

.phone-support i.icon {
   display       : inline-block;
   height        : 30px;
   width         : 30px;
   background    : url('/path/to/sprite.png') -10px -10px;
}

.电话支持a{
显示：内联块；
线高：30px；
右侧填充：5px；
高度：30px；
}
.电话支持图标{
显示：内联块；
高度：30px；
宽度：30px；
背景：url（'/path/to/sprite.png'）-10px-10px；
}

我认为它应该可以工作，但是

.phone support

的高度变成了41px，但是为什么呢？元素没有垂直对齐。他们只是一个接一个地呆着，为什么会这样

另外，我的浏览器是Chromium 18。不要注意没有ie内联块修复等。CSS代码只是为了指出问题而简化

尝试设置CSS“垂直对齐”属性。对于大多数元素，它默认为“基线”，这可能是您唯一不想要的。我倾向于“垂直对齐：中间”

使用“垂直对齐：基线”时，内联块元素会在其下方获得一个大约与字母“g”悬挂部分大小的间隙，这可能是您看到的额外3个像素的高度

只需将您的

放入

中即可。好处是什么？您的图像将是可链接的

<div class="phone-support">
   <a href="#">We'll call you  <i class="icon"></i> </a>
</div>

---

您是否尝试过通过抛出填充顶部定义来调整i.icon的高度，以偏移精灵图像？如果您希望元素的顶部彼此对齐，即使它们的大小不同，那么您的选项是“顶部”和“文本顶部”。垂直对齐：中间解决了此问题。谢谢但是什么高度超过30，我不明白。这并不是因为诸如

g

、

y

等字母……文本行的高度（a元素包含在其中，因为它是内联流的一部分）超过30。一行文本始终在基线下方留有空格，即使没有实际的挂起字符使用该空格。（当处理段落形式的实际文本时，很明显这是必要的：很少有一行没有挂起字符，否则会显得很奇怪。）我忘了，这个图标也应该是可点击的，所以我真的需要把

放在

里面。谢谢你，我已经做到了。问题只是，我用

创建的文本和图标之间的空格。但是没关系。我不需要精确的像素；）您不需要使用
：只需设置一个左边距！注：我不会使用线条高度，因为它在一些移动浏览器中显示不好。为了解决这个问题，我使用了align:middle，而不是lineheight，我只使用填充。哦，是的。它与保证金有关。我几乎要睡觉了，所以我问了一些简单的问题，然后就不说话了；）
.phone-support i.icon {
     display       : inline-block;
     vertical-align: top;
     height        : 30px;
     width         : 30px;
     background    : url(your url here);
     margin-left   : 10px;  /*add some space*/
}