CSS 将图标与文本对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3106290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
align icons with text
提问by badnaam
What's the best way to align icons (left) and text (right) or the opposite text on left and icon on right?
对齐图标（左）和文本（右）或左侧的相反文本和右侧的图标的最佳方法是什么？
Does the icon image and text have to be the same size? Ideally I would like them to be different but be on the same vertical alignment.
图标图像和文本必须大小相同吗？理想情况下，我希望它们不同，但处于相同的垂直对齐方式。
I am using background-position css property to get the icons from a larger image.
我正在使用 background-position css 属性从较大的图像中获取图标。
Here is how I do it now, but I am struggling with either getting them to be on the same line or be vertically aligned to the bottom.
这是我现在的做法，但我正在努力让它们在同一条线上或垂直对齐到底部。
Text
文本
This is what I get after I try your suggestions.
这是我尝试您的建议后得到的。
Though the text is now aligned with the icon, it is superimposed over the icon to the right of the icon that I want. Please note that i am using the background position to show the icon from a larger set of images.
虽然文本现在与图标对齐，但它叠加在我想要的图标右侧的图标上。请注意，我使用背景位置来显示较大图像集中的图标。
Basically I am getting
基本上我得到
<icon><10px><text_and_unwanted_icon_to_the_right_under_it>
<span class="group3_drops_icon group3_l_icon" style="">50</span>
group3_drops_icon {
background-position:-50px -111px;
}
.group3_l_icon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/images/group3.png) no-repeat scroll left center;
height:35px;
overflow:hidden;
padding-left:55px;
}
回答by rossipedia
I usually use background:
我通常使用background：
<style type="text/css">
.icon {
background-image: url(path/to/my/icon.jpg);
background-position: left center;
background-repeat: no-repeat;
padding-left: 16px; /* Or size of icon + spacing */
}
</style>
<span class="icon">Some text here</span>
回答by Jamie Wong
You can do it on the same line using vertical-align and line-height
您可以使用 vertical-align 和 line-height 在同一行上完成
<p style='line-height: 30px'>
<img src='icon.gif' style='vertical-align: middle' />Icon Text
</p>
Alternatively, you can go the background approach with no-repeat and positioning:
或者，您可以使用不重复和定位的背景方法：
span.icontext {
background: transparent url(icon.gif) no-repeat inherit left center;
padding-left: 10px /* at least the width of the icon */
}
<span class="icontext">
Icon Text
</span>
回答by Merritt6616
Sadly, neither of these answers are bullet proof and each have one big flaw.
可悲的是，这些答案都不是防弹的，每个答案都有一个很大的缺陷。
@rossipedia I used to implement all my icons this way and it works quite well. But, and this is a big but, it does not work with sprites, since you're using the background-position property to position the icon inside the container that includes your text. And not using sprites where you can is bad for performance and SEO, making them imperative for any good modern website.
@rossipedia 我曾经以这种方式实现我的所有图标，并且效果很好。但是，这是一个很大的但是，它不适用于精灵，因为您使用 background-position 属性将图标定位在包含您的文本的容器内。并且不在可能的地方使用精灵对性能和搜索引擎优化不利，这使得它们对于任何好的现代网站都是必不可少的。
@Jamie Wong The first solution has two markup flaws. Using elements semantically correctly is sadly underrated by some, but you'll see the benefits in prioritizing form in your search engine ranking. So first of all, you shouldn't use a p-tag when the content is not a paragraph. Use span instead. Secondly, the img-tag is meant for content only. In very specific cases, you might have to ignore this rule, but this isn't one of them.
@Jamie Wong 第一个解决方案有两个标记缺陷。某些人很遗憾地低估了在语义上正确使用元素的重要性，但您会看到在搜索引擎排名中优先使用表单的好处。所以首先，当内容不是段落时，你不应该使用 p-tag。改用跨度。其次，img-tag仅用于内容。在非常特殊的情况下，您可能不得不忽略此规则，但这不是其中之一。
My Solution: I won't lie to you, I've checked in a lot of places in my time and IMHO there is no optimal solution. These two solutions are the ones that come closest to that, though:
我的解决方案：我不会骗你，我已经检查了很多地方，恕我直言，没有最佳解决方案。不过，这两个解决方案是最接近的：
Inline-Block Solution
内联块解决方案
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;
}
"display:inline-block;" is a beautiful thing. You can do so much with it and it plays very nicely with responsive design. Butit depends on your client. Inline-Block does not work well with IE6, IE7 and still causes problems with IE8. I personally no longer support IE6 and 7, but IE8 is still out there. If your client really needs his website to be usable in IE8, inline-block is sadly no option. Assess this first. Replace the black background of the icon-element with your sprite, position it, throw no-repeat in there and voilà, there you have it. Oh yeah, and as a plus, you can align the text any way you want with vertical-align.
“显示：内联块；” 是一件美丽的事情。你可以用它做很多事情，而且它与响应式设计配合得非常好。 但这取决于您的客户。Inline-Block 不适用于 IE6、IE7，并且仍然会导致 IE8 出现问题。我个人不再支持 IE6 和 7，但 IE8 仍然存在。如果您的客户真的需要他的网站在 IE8 中可用，那么 inline-block 很遗憾没有选择。先评估一下。用你的精灵替换图标元素的黑色背景，定位它，在那里不重复，瞧，你有它。哦，是的，作为一个加号，您可以使用垂直对齐以任何方式对齐文本。
P.S.: I am aware that there's an empty HTML-tag in there, if anyone has a suggestion as to how to fill it, I'd be thankful.
PS：我知道那里有一个空的 HTML 标签，如果有人对如何填写它有建议，我会很感激。
Fixed Height Solution
固定高度解决方案
.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;
}
I hate this one. It uses a fixed line height for the text, and if you choose the same height as the Icon's box, the text is centered to that height. To align the text to the top, cut the line height, and as to the bottom, you'll have to fix that with position: absolute and a fixed width and height for the container. I'm not going to get into that unless someone requests it, because it's a whole issue for itself, and brings with it a lot of disadvantages. The main disadvantage of this path is the fixed height. Fixed heights are always unflexible and especially with text, it can cause a bunch of problems (You can no longer scale the text as a user without it being cut off, plus different browsers render text differently). So be sure that in no browser the text is cut off and that it has some wiggle room inside its line height. P.S.: Don't forget the clearfix for the container. And, of course, replace the black background with your sprite and according position + no-repeat.
我讨厌这个。它对文本使用固定的行高，如果您选择与图标框相同的高度，则文本会以该高度为中心。要将文本与顶部对齐，削减行高，至于底部，您必须使用 position: absolute 和容器的固定宽度和高度来修复它。除非有人提出要求，否则我不会讨论这个问题，因为这本身就是一个完整的问题，并且会带来很多缺点。这条路径的主要缺点是高度固定。固定高度总是不灵活的，尤其是对于文本，它会导致一系列问题（您不能再以用户身份缩放文本而不会被截断，而且不同的浏览器会以不同的方式呈现文本）。所以请确保在任何浏览器中文本都不会被截断，并且在其行高内有一些摆动空间。PS：不要忘记容器的 clearfix。而且，当然，用您的精灵和相应的位置 + 不重复替换黑色背景。
Conclusion
结论
Use inline-block if at all possible. ;) If it's not, breath deeply and try the second solution.
如果可能，请使用内联块。;) 如果不是，请深呼吸并尝试第二种解决方案。
