将图标与文本对齐 [英] align icons with text

问题描述

对齐图标（左）和文本（右）或左对齐文本和右对齐图标的最佳方法是什么？

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.

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

I am using background-position css property to get the icons from a larger image.

这是我现在的操作方式，但是我正在努力使它们处于同一行或垂直对齐底部。

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.

文本

这是在尝试您的建议后得到的。

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.

基本上我会得到

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

推荐答案

我通常使用背景：

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

这篇关于将图标与文本对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！