イメージラベル（チェックボックス/ラジオボタン用）の配置/位置を固定する方法は？

Question

コードは2つの異なるソースから取得されていますが、追加する予定ですが、投稿するには10人の担当者がいません。

First attempt。ひどく置かれたラジオボタンに注目してください。

Second attempt。私はソースを知らない、それは直接Googleの結果だった。上下のパディング/アライメントの違いに注目してください。

[li]要素を使用しようとしましたが、動作しませんでした。

img{display: block;}をCSSに追加すると、予期しない結果が発生します。要素全体をイメージで「塗りつぶし」、イメージの左の部分は緑の部分の後ろに隠されます。

私は自信を持ってCSS/HTMLのnoobです。私はいくつかのことを理解して簡単なことをすることができますが、配置/配置はまだ私の謎です。

このコードの仕組みを知りたいのですが、私は、 "選択された" "ボタン"の緑色の枠線を追加し、いくつかの小さな視覚的なものを変更する予定です。私はまた、 "チック"をどのように中心に置き、ローカル/グローバルに "ダニ"マークを実装し、content:'\2714';に依存しないかを知りたいと思います。

私はここで何が起こっているのか、これをどのように修正できるのか（そして今後の知識を適用する）を理解してください。

EDIT： 2回目の試行で更新されました。アライメントが修正された場合にのみ.... sigh。

Answer 1

OK、これは本当に愚かな音が鳴ります...

私が追加：

img 
{ 
    display:block; 
    margin: 5px 5px 5px 45px; 
} 

と余白を編集した...その適切に取り組んでいます。

しかし、私はちょうど底にその悪いスペースがあった理由を理解していません。 http://jsfiddle.net/xwussun1/5/

EDIT **：** ALSO line-height: 6;を追加することにより、目盛りの位置を固定し、ここで

は、新しいバージョンがあります。

Answer 2

これは達成したいことですか？ http://jsfiddle.net/xwussun1/7/

ない私が正しく理解してください、しかし、ここで私達は行く： 私は一番下に「悪い」のスペースがデフォルトであることに起因しているボックスをこのよう

top: 50%; 
margin-top: -20px; (minus half the height of the element) 
height: 40px;