如何在图像宽度变化时对齐图像和文字？

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> 

的图像是变化的宽度的，有些是20个像素宽，其它的是17个像素宽。我希望图像之后的文字垂直排列。我怎样才能做到这一点？

Answer 1

您需要将img标签包装在带显示和宽度属性的div内。

<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：

.imgContainer { 
    display: inline-block; 
    width: 26px; 
} 

入住这http://jsfiddle.net/44zMW/