空のdiv要素に表示する背景イメージを取得する

Question

空白のdiv要素を使用して背景イメージを表示しようとしていますが、div要素に何か（何らかのテキスト）を入れない限り表示されません。

テキストの横にグラフィックを表示し、テキストをテキストと垂直に揃えたいので、これを行う必要があります。

空白のdivに背景画像を表示するにはどうすればよいですか？

私のGoogle-fuは失敗しました。

<div class="photoInfo"> 
lorem ipsum | 
<div style="background:url('foo.gif') no-repeat;display:inline;"></div> 
</div> 

ありがとう！

編集： 以下のコードは実際に画像を表示していますが、完全に整列させるには2〜3ピクセルのようにニックネーする必要があります。

これは私が達成しようとしているアイデアです。

<div class="photoInfo"> 
    Added<span class="spacer">•</span>Wed Apr 01, 2009 1:01 pm<span class="spacer">•</span>64.10 KB<span class="spacer">•</span>659x878 pixels 
    <span class="spacer">•</span> 
    <img src="/_assets/img/icons/new-photo-small.gif" /> 
</div> 
<!--<div style="height:14px;width:31px;background:url('') no-repeat 0px 5px;display:inline-block;"></div>--> 

.photoInfo 
{ 
font-size:0.6em; 
color:#b0bad9; 
padding-bottom:15px; 
text-align:center; 
} 

Answer 1

これを打つ！あなたの代わりにspanのdivを使用する場合は

one | <span style="padding-left: 20px; background: url('16x16-image.gif') no-repeat; height: 16px">two</span> | three 

、あなたにもスタイルにdisplay: inlineを設定する必要があります。

Answer 2

背景がphotoInfo divにする必要があり、あなたはbackground-positionでそれを配置することができます。 0の高さと幅の背景を持つことはできません。あなたがそれを増やしても、それはあなたのデザイン上のスペースを占めるでしょう。

Answer 3

overflow:hidden divに長さと幅を割り当てることができます。

一般に、私はあなたが望むものを達成するための他の方法があると思います。テキストと画像を水平に整列させたい場合は、画像をdivに入れないでそれを行うことができます。たとえば、inlineとfloatを使用できます。

Answer 4

divにサイズを指定する必要があります。そうでなければサイズは0px x 0pxです。

Answer 5

安価な仕事です。 divに非改行スペース（& nbsp;）を入れてください。

Answer 6

あなたが任意のテキストを使用しない場合、これはSafariとFirefoxで動作します（IEをテストしていない）：

one | <span style="padding: 16px 16px 0 0; background: url('16x16-image.gif') no-repeat; font-size: 0">&nbsp;</span> | three

Answer 7

あなたはdiv要素を移動せずに背景画像を移動しようとしていますか？ Googleの-FU、笑background-position: 0px 3px;