如何将文本垂直对齐此列表项中的复选框？

Question

我正在引用一个codepen示例，该示例显示了允许滑动和删除功能的离子复选框列表。

我遇到的唯一问题是，添加此功能后样式会变得混乱。复选框文本没有与我需要的复选框垂直对齐。它应该在右侧并与复选框图标

垂直对齐

您可以查看the sample codepen here并使用它来破坏样式。

ion-list标记如下所示：

<ion-list show-delete="false"
            on-delete="onItemDelete(item)"
            can-swipe="true"
            option-buttons="itemButtons">

    <ion-item ng-repeat="item in items" item="item">
       <label class="checkbox">
        <input type="checkbox" ng-click="clickItem(item); $event.stopPropagation();" ng-model="item.checked">
        Item {{ item.id }}
      </label>

       <ion-option-button class="button-assertive icon ion-trash-a">
    </ion-item>

  </ion-list>

错误

从右

Answer 1

<label class="checkbox">
  <input type="checkbox" ng-click="clickItem(item); $event.stopPropagation();" ng-model="item.checked" style="display:block;float:left;">
  <span style="display:block;float:left;line-height:28px;margin-left:10px;">Item {{ item.id }}</span>
</label>

Answer 2

您可以在css文件中包含此css

.checkbox input, .checkbox-icon {
  display: inline-block;
  vertical-align: middle;
}

您也可以使用css修改间距和颜色。

Answer 3

你正在使用角度和离子......保持良好的站立并使用弹性元素:) https://css-tricks.com/snippets/css/a-guide-to-flexbox/