可悲的是，这些答案都不是防弹的，每个都有一个大缺陷。
@rossipedia 我曾经以这种方式实现我的所有图标，并且效果很好。但是，这是一个很大的问题，但它不适用于精灵，因为您使用 background-position 属性将图标定位在包含文本的容器内。并且尽可能不使用精灵对性能和搜索引擎优化不利，这使得它们对于任何好的现代网站都是必不可少的。
@Jamie Wong 第一个解决方案有两个标记缺陷。可悲的是，正确地使用语义上的元素被某些人低估了，但是您会看到在搜索引擎排名中优先考虑表单的好处。所以首先，当内容不是段落时，你不应该使用 p-tag。改用跨度。其次，img-tag 仅用于内容。在非常特殊的情况下，您可能不得不忽略此规则，但这不是其中之一。
我的解决方案：我不会骗你，我已经检查了很多地方，恕我直言，没有最佳解决方案。不过，这两个解决方案是最接近的解决方案：
内联块解决方案
HTML:
<div class="container">
<div class="icon"></div>
<span class="content">Hello</span>
</div>
CSS:
.container {
margin-top: 50px;
}
.container .icon {
height: 30px;
width: 30px;
background: #000;
display: inline-block;
vertical-align: middle;
}
.container .content {
display: inline-block;
vertical-align: middle;
}
“显示：内联块；” 是一件美好的事情。你可以用它做很多事情，它在响应式设计中表现得非常好。
但这取决于您的客户。Inline-Block 不适用于 IE6、IE7，并且仍然会导致 IE8 出现问题。我个人不再支持 IE6 和 7，但 IE8 仍然存在。如果你的客户真的需要他的网站在 IE8 中可用，那么 inline-block 很遗憾是没有选择的。先评估这个。用你的精灵替换图标元素的黑色背景，定位它，在那里扔不重复，瞧，你有它。哦，是的，另外，您可以使用垂直对齐以任何方式对齐文本。
PS：我知道那里有一个空的HTML标签，如果有人对如何填写它有建议，我将不胜感激。
固定高度解决方案
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
.container {
margin-top: 50px;
border: 1px solid #000;
}
.container .icon {
height: 30px;
width: 30px;
background: #000;
float:left;
}
.container .content {
line-height: 30px;
float: left;
display: block;
}
我讨厌这个。它为文本使用固定的行高，如果您选择与图标框相同的高度，则文本以该高度为中心。要将文本与顶部对齐，剪切行高，至于底部，您必须使用 position: absolute 和容器的固定宽度和高度来修复它。除非有人要求，否则我不会讨论这个问题，因为这本身就是一个完整的问题，并带来很多缺点。这条路径的主要缺点是高度固定。固定高度总是不灵活的，尤其是对于文本，它可能会导致一堆问题（您不能再以用户身份缩放文本而不被切断，而且不同的浏览器会以不同的方式呈现文本）。因此，请确保在没有浏览器的情况下，文本会被截断，并且在其行高内有一些摆动空间。PS：不要忘记容器的 clearfix。而且，当然，用你的精灵替换黑色背景并根据位置+不重复。
结论
尽可能使用 inline-block。;) 如果不是，请深呼吸并尝试第二种解决方案。