Question

我有使用Knockoutjs绑定的数据列表，现在来自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

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

向所有人提供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;" />

列表视图algin水平CSS移动

1 个答案: