css - 使用 INPUT 在 JQM ListView 中垂直居中图像

Question

我有一个 JQM ListView vwith 一个复选框，我无法将图像垂直居中到文本的左侧：

    <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Object collector</li>
        <li data-icon="false">
            <fieldset data-role="controlgroup">
                <input type="checkbox" name="checkbox-2b" id="checkbox-2b" />
                <label for="checkbox-2b">
                    <img src="/img/image.png"/>
                    <h3>Long description</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper, augue a consequat viverra, mi mi varius dui, nec ullamcorper velit eros in quam. </p>
                </label>
            </fieldset>
        </li>
    </ul>

这是我的意思的一个示例：http: //jsfiddle.net/BPGre/

这是在“img”标签周围使用 div 包装器的另一种尝试，但没有，图像始终与顶部对齐：http: //jsfiddle.net/BPGre/1/

我尝试了在 SO 找到的其他一些解决方案，但由于 ListView 项目中的 INPUT 标记，它们都不起作用。非常感谢任何帮助。

Answer 1

将图像和描述包装器包装在表格中将使其垂直居中。使用表格可能不是最理想的解决方案，但它可以完成工作。

<table>
   <tr>
       <td>
         <img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" />
       </td>
       <td>
         <div class="description-wrapper">
           <h3>Collector</h3>
           <p>Lorem ipsum dolor sit </p>
         </div>
       </td>
    </tr>
</table>

http://jsfiddle.net/BPgre/2/