html - 当图像宽度不同时如何对齐图像和文本？

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 标签包装在具有 display 和 width 属性的 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/