用文字對齊圖標

我以前曾問過這個問題，但無法解決問題，所以再次詢問。用文字對齊圖標

我正在嘗試從垂直精靈圖標（左側）與文本（右側）對齊。我希望文本和圖標底部對齊，而不管圖標和文本的大小，即文本可以是h1或可以是h5。圖標大小在25px大致保持不變。

我現在使用下面的css。

.icons1 { 
    padding-left:40px; 
    background: transparent url(icons1.png) no-repeat scroll left center; 
    overflow: hidden; 
} 

.tree_icon { 
    background-position: -15px -12px; 
} 

<div> 
    <h1><span class="icons1 tree_icon"></span>Big header</h1> 
</div>

但我不能讓圖標與右側的文本對齊，而不會弄亂圖標的背景位置。理想情況下，我寧願不這樣做，只是在CSS類上使用相同的圖標，而不管它旁邊的文本大小。

來源

2010-06-27 badnaam

你可以做的是將「icons1 tree_icon」類放在h1上。這樣你就沒有增加額外的span元素的複雜性（這會導致與它旁邊元素的垂直對齊問題）。

您應該始終能夠將背景垂直居中在h1上。那麼你可能甚至不需要.tree_icon類。

來源

2010-06-27 23:12:24 wows

謝謝先生！奇蹟般有效！！ – badnaam 2010-06-27 23:48:50

這種方法的缺點是如果你有一個CSS圖像精靈。如果您有長文本，即免費送貨，h1將在兩到三行。 – Danger14 2013-04-18 20:47:49

你有沒有試過在你的H1之前把你的跨度放在左邊？

來源

2010-06-28 00:05:01 fabjoa

用文字對齊圖標

回答

相關問題