センターイメージとテキスト

Question

私はタイトルバーと呼ばれるdivがあります。このタイトルバーの幅は100％です。私のタイトルバーの中で私はタイトルを中央にしたい、私のタイトルの隣にはアイコンを表示したい。だから、タイトルとアイコンのコンボは互いに隣り合っていて、中央に置かなければなりません。

これは難しいことではありませんが、私は画像スプライトを使用しているため、<img>タグを使用できません（一部の要素の背景にアイコンが必要です）。

誰でもこの問題を解決する方法がありますか？

これは、約限り、私が来ていると（本当の成功）である： 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以前では動作しません、あなたが動作するようにそれらを必要とするならば、あなたはいくつかのハックを追加する必要があります。