アイコンを垂直に整列する

Question

アイコンがあります。問題は、他のすべてのもの（テキスト、入力）のように、中央に垂直に配置しないことです。チェックボックスとテキストが真ん中にありながら、

<div class="i_contain_things"> 
    <div class="i_float_left"><checkbox/></div>some text 
    <div class="i_float_right"> 
    <span class="sprite icn1">my sprite</span> 
    <span class="sprite icn2">my sprite</span> 
    </div> 
</div> 

.i_contain_things 
{ 
clear:both; 
margin-bottom:10px; 
vertical-align:middle; 
} 

.i_float_left 
{ 
padding:0 3px 0 3px; 
float:left; 
display:inline-block; 
} 

.i_float_right 
{ 
padding:0 3px 0 3px; 
float:right; 
display:inline-block; 
vertical-align:middle; 
} 

.sprite 
{ 
display:inline-block; 
background: url(../img/icn_sprite_1.png); 
width: 16px; 
height: 16px; 
vertical-align: middle; 
} 
.icn1{background-position:0,0} 
.icn2{background-position:0,16px} 

私のスプライトが常に下に整列されています。私のHTML構造は、このようなものです。

Answer 1

background-positionプロパティを指定する必要があります。そうのような第一の数は、軸X及び第二の数あなたが背景画像の位置を宣言するためにパーセント、ピクセル、またはキーワード（右、上部、中央）を使用することができる軸Yである

sprite { background: url(../img/icn_sprite_1.png) 50% 50% no-repeat; 

。

http://www.w3schools.com/css/css_background.asp

Answer 2

これが仕事に行くのではありません、スパンはそうとすぐにテキストを削除すると、インライン要素である、それが崩壊します。 heightとwidthは何もしません。

あなたは正確に何を達成したいのかよく分かりませんが、スプライトを既に持っている要素の1つ（たとえば.i_contain_things）の背景に置く必要があります。別の要素。

あなたは別の要素でそれを配置する必要がある場合、あなたは確かit'sブロックレベル要素（display:blockに設定しています例えばdivまたはspan）を作成する必要があります。その要素は、必要な場所に配置する必要があります。