ラベルを背景画像に合わせる

Question

私は、チェックボックスの画像の背景とラベルを持つdivで構成されるチェックボックスを作成しました。

HTML：

<div class="checkbox checked" ></div> 
<label class="label">Some text</label> 

とCSS：

.checkbox 
{ 
    height: 16px; 
    width: 16px; 
    float:left; 
    background: url(http://cdn1.iconfinder.com/data/icons/uidesignicons/checkbox_yes.png) no-repeat 0px 0px; 
} 

問題がある - ラベルが画像と位置合わせされていない、それは少し画像のdivのベースラインの下に座っていると、それは醜いです。 http://jsfiddle.net/muzzzy/3hUGV/5/

これは実際には通常のチェックボックスを変換するjavascriptプラグインの一部であるため、パディングや行の高さに絶対値を指定できないので、それらを整列させるにはどうすればよいですか？ 、ラベルは異なるフォントサイズにすることができます。

UPDATE：私もそれが今どのように見えるかの画像を含めています：

私があなたならば、テキストを縦画像

Answer 1

あなたはspanのためにあなたのdiv.checkboxをスワップアウトした後、display:inline-blockにspanを設定したほうが良いでしょう。このように、あなたは彼らが中心に取得する要素にvertical-align:middleを使用することができます

JSフィドル（垂直整列を使用している唯一のまれなケースを！）：あなたがテストしているブラウザhttp://jsfiddle.net/3hUGV/34/

Answer 2

の中心と中心がしたいのですが古いブラウザについて気にしないでください、float: leftを落として、display: inline-block;をdiv.checkboxに使ってみてください。その後、vertical-align属性で再生します。

次に、私たちの中にはすでに大丈夫だと思われるので、いくつかのクロスブラウザを実行してください！

ここでは実際の例：http://jsfiddle.net/karameloso/hQ2uK/

Answer 3

さて、あなたが求めているもののため、テーブルを試してみてください。http://jsfiddle.net/3rRb6/

（もちろん、あなたがOMG-IM-使用されていないものの一つでない限り-a-テーブル用レイアウト！@ $＃！@ $！？！人のタイプ）