内联块解决方案

Question

将图标（左）和文字（右）或左边的相反文字和右边的图标对齐的最佳方法是什么？

图标图片和文字的大小必须相同吗？理想情况下，我希望它们不同，但是在同一垂直对齐方式上。

我使用background-position css属性从更大的图像中获取图标。

我现在是这样做的，但是我正在努力让它们在同一条线上或垂直对齐到底部。

文字

这是我在尝试你的建议后得到的结果。

虽然文本现在与图标对齐，但它会叠加在我想要的图标右侧的图标上。请注意，我使用背景位置从更大的图像集中显示图标。

基本上我得到了

<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;
}

Answer 1

我通常使用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>

Answer 2

您可以使用vertical-align和line-height

在同一行上执行此操作

<p style='line-height: 30px'>
  <img src='icon.gif' style='vertical-align: middle' />Icon Text
</p>

或者，您可以采用无重复和定位的背景方法：

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>

Answer 3

可悲的是，这些答案都没有防弹，每个都有一个很大的缺陷。

@rossipedia 我曾经用这种方式实现我的所有图标，效果很好。但是，这是一个很大但是，它不适用于精灵，因为你使用background-position属性将图标放在包含文本的容器中。并且不使用精灵而不是性能和搜索引擎优化，这对于任何优秀的现代网站都是必不可少的。

@Jamie Wong 第一种解决方案有两个标记缺陷。有些人遗憾地在语义上正确地使用元素，但是你会看到在搜索引擎排名中优先考虑表单的好处。首先，当内容不是段落时，不应使用p-tag。请改用span。其次，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中可用，那么内联块很遗憾没有选择。先评估一下。用你的精灵替换icon-element的黑色背景，定位它，在那里扔不重复，然后你就拥有它。哦是的，作为一个加号，你可以任意方式对齐文本与vertical-align。

P.S。：我知道那里有一个空的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以及容器的固定宽度和高度来固定它。除非有人提出要求，否则我不打算这样做，因为它本身就是一个问题，并带来很多不利因素。这条路径的主要缺点是固定高度。固定高度总是不灵活，特别是对于文本，它可能会导致一系列问题（您不能再将文本缩放为用户而不会被切断，加上不同的浏览器以不同的方式呈现文本）。所以请确保在没有浏览器的情况下，文本被切断，并且在行高处有一些摆动空间。 P.S。：不要忘记容器的clearfix。当然，用你的精灵替换黑色背景并根据位置+不重复。

结论

尽可能使用内联块。 ;）如果不是，请深呼吸并尝试第二种解决方案。

将图标与文本对齐

3 个答案:

内联块解决方案

固定高度解决方案

结论