将图标与文本对齐

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.

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.当然,用你的精灵替换黑色背景并根据位置+不重复.

结论

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