html - 无法在 span 元素内对齐 ionic

Question

HTML

<div class="bootstrap-tagsinput">
<span class="tag label label-warning custom-class">label 1<span class="ion-ios-close-empty close"></span></span>
<span class="tag label label-warning custom-class">label 2<span class="ion-ios-close-empty close"></span></span>
</div>

CSS

.bootstrap-tagsinput {
    display:inline-block;
    vertical-align:middle
   }

.bootstrap-tagsinput .tag {
    display:inline-block;
   }

.custom-class { 
   margin: 1px; padding-right: 1.5rem;
   }

.close { 
  font-size: 2rem; position: relative; top: 0.4rem; left: 1rem
  }

这是一个已加载必要 css 文件的 codepen:

https://codepen.io/anon/pen/ooWwpe

我不确定在图标的 span 内包含 span 是否是正确的方法。但我需要图标成为它自己的元素，以便可以单击它。

如果有帮助，我们将不胜感激。

Answer 1

这是:https://codepen.io/commercialsuicide/pen/vWmZPr

只需对 .close 元素赋予否定的 top 规则，因为默认情况下它们的高度太大。