Question

我有一个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/

这是另一个尝试使用div包装围绕＆＃34; img＆＃34;标签，但没有，图像始终与顶部对齐： 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/

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

1 个答案: