이미지의 너비가 다양 할 때 이미지와 텍스트를 정렬하는 방법은 무엇입니까?

Question

이 내 코드입니다 :

<div id="set"><label class=""><input type="checkbox" name="" onclick=""><img src="http://goblinhammer.com/symbols/magic 2014 (m14).gif" alt="Magic 2014 (M14)">Magic 2014 (M14)</label></div> 
<div id="set"><label class=""><input type="checkbox" name="" onclick=""><img src="http://goblinhammer.com/symbols/dragon's maze.gif" alt="Dragon's Maze">Dragon's Maze</label></div> 
<div id="set"><label class=""><input type="checkbox" name="" onclick=""><img src="http://goblinhammer.com/symbols/gatecrash.gif" alt="">Gatecrash</label></div> 
<div id="set"><label class=""><input type="checkbox" name="" onclick=""><img src="http://goblinhammer.com/symbols/return to ravnica.gif" alt="">Return to Ravnica</label></div> 
<div id="set"><label class=""><input type="checkbox" name="" onclick=""><img src="http://goblinhammer.com/symbols/magic 2013 (m13).gif" alt="">Magic 2013 (M13)</label></div> 
<div id="set"><label class=""><input type="checkbox" name="" onclick=""><img src="http://goblinhammer.com/symbols/avacyn restored.gif" alt="">Avacyn Restored</label></div> 
<div id="set"><label class=""><input type="checkbox" name="" onclick=""><img src="http://goblinhammer.com/symbols/dark ascension.gif" alt="">Dark Ascension</label></div> 
<div id="set"><label class=""><input type="checkbox" name="" onclick=""><img src="http://goblinhammer.com/symbols/innistrad.gif" alt="">Innistrad</label></div> 

이미지 폭을 변화의 있습니다, 일부는 다른 폭 17 픽셀이며, 20 픽셀 (폭)입니다. 이미지 뒤의 텍스트를 수직으로 정렬하고 싶습니다. 어떻게해야합니까?

Answer 1

div 내에서 img 태그를 display 및 width 속성으로 둘러 쌀 필요가 있습니다.

<div id="set"> 
    <label class=""> 
    <input type="checkbox" name="" onclick=""> 
    <div class="imgContainer"> 
     <img src="http://goblinhammer.com/symbols/innistrad.gif" alt=""> 
    </div>Innistrad 
    </label> 
</div> 

CSS :이 http://jsfiddle.net/44zMW/