中心圖像和文字

Question

我有一個叫做titlebar的div。該標題欄的寬度爲100％。在我的標題欄內，我想將標題居中並在我的標題旁邊顯示圖標。所以標題+圖標組合應該彼此相鄰並且居中。

這應該不是那麼困難，但問題是我使用的是圖像精靈，所以我不能使用<img> -tag（我需要圖標是某些元素的背景）。

任何人都知道如何解決這個問題？

這是關於至於我來（沒有真正的成功）： http://jsfiddle.net/Tw33Y/2/

Answer 1

這是很容易在現代瀏覽器來實現。如果這是你的HTML：

<div class="titlebar"> 
    <div class="title-sprite"></div> 
    Title Text 
</div> 

然後使用這個CSS樣式是：

.titlebar { 
    text-align: center; 
} 

.title-sprite { 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    background: url(http://www.alistapart.com/d/sprites/sprites.gif) -36px -24px no-repeat; 
} 

這不會在IE7中工作或更早版本，您將需要添加一些黑客，如果你需要他們的工作。