列出移动设备的Algin Algin水平CSS

Question

我有我使用quoteToutjs绑定的数据列表，现在是CSS部分，我需要水平对齐。我在CSS中不太好。我有三个图像和用户名因此，我想在下面的移动应用程序的水平上对齐我的代码，请建议我。

<ul style="list-style: none;" data-role="listview" id="hierarchical-listview" data-bind="foreach:UserProfile">
<li style="background-color:#FFF">
 <div style="width:100%;">
 <div style="width:50%">
 <div style="padding-left:20px;padding-top:10px">
 <span data-bind="text:UserId" style="display:none;"></span>
 <span data-bind="text:Username"></span>
 <img class="profileimage" data-bind="attr: { src: UserImage }" style="width:60px;height:60px;float:left!important;" />
 <img data-bind="attr: { src: UserProfileImage }" style="width:30px;height:30px;float:left!important;" />
</div>
</div>
<div style="width:50%;float:left;margin: 0px -20px;">
<img data-bind="attr: { src: UserPostedImage }" style="width:30px;height:30px;float:left!important;" />
<input type="checkbox" class="listcheckbox km-widget km-icon km-check" data-bind="checked:UserSelected" />
 </div>
 </div>
 </div>
 </li>
 </ul>

Answer 1

从您的img容器和父div容器中删除所有float。

向全部提供display: inline-block，然后将vertical-align: middle提供。

所以您的img元素应该看起来像：

<img class="profileimage" data-bind="attr: { src: UserImage }" style = "width:60px; height:60px; display: inline-block; vertical-align: middle;" />