將圖標與文字對齊

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

可以使用垂直對齊和行高

<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僅適用於內容。在非常特殊的情況下，你可能不得不忽略這個規則，但這不是其中之一。

我的解決方案： 我不會騙你，我在我的時間檢查了很多地方，恕我直言，沒有最佳解決方案。這兩種解決方案是最接近的那些，雖然：

inline-block的解決方案

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的;」是一件美麗的事情。你可以用它做很多事情，它使用響應式設計非常好。 但是這取決於你的客戶端。 Inline-Block在IE6和IE7下不能正常工作，並且仍然會導致IE8出現問題。我個人不再支持IE6和7，但IE8仍然在那裏。如果你的客戶真的需要他的網站在IE8中可用，那麼內聯塊是可悲的選擇。先評估一下。將圖標元素的黑色背景替換爲你的精靈，放置它，不要在那裏重複，瞧，你有它。 哦，是的，作爲一個加號，你可以任何你想要的方式與垂直對齊文本。

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。當然，用你的精靈替換黑色背景，並按照位置+不重複。

結論

如果可能的話，使用內聯塊。 ;）如果不是，深呼吸並嘗試第二種解決方案。