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

这是我的代码：

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

Magic 2014（M14）
龙的迷宫
网关崩溃
返回拉夫尼卡
魔术2013（M13）
艾维欣重临
黑暗提升
伊尼翠

---

这些图像的宽度各不相同，有的宽20像素，有的宽17像素。我希望图片后面的文字垂直排列。如何执行此操作？

您需要使用display和width属性将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>

---

选中此项，HTML中的

img

不会显示。您可以将

src

更改为图像的完整路径吗？将HTML更新为完整路径以显示图像。这不会对齐文本。我试图使文本对齐，类似于列。但不使用表列。我正试图用CSS.Oops做这件事。小姐理解了问题。我已经更新了答案，请检查。

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