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/

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

1 个答案: