使用 INPUT 在 JQM ListView 中垂直居中图像答案

【问题标题】：Vertically center image in JQM ListView with INPUT使用 INPUT 在 JQM ListView 中垂直居中图像
【发布时间】：2013-08-16 06:59:04
【问题描述】：

我有一个带有复选框的 JQM ListView v，但我无法将图像垂直居中放置在文本的左侧：

    <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 标记，它们都不起作用。非常感谢任何帮助。

【问题讨论】：

标签： css listview jquery-mobile checkbox

【解决方案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/

【讨论】：

包装在表格中会破坏 jqm 响应式布局，例如在较小的屏幕尺寸下，文本位于图片下方。
我知道。我尽可能避免使用桌子。您正在开发多小的屏幕？只要您设置了图像的高度和宽度，那么您就不应该遇到这个问题。
应该有三种分辨率：桌面、平板、手机。所以我会保留 jqm 内置功能以使布局适应屏幕宽度。这是因为我尽量避免表格布局。