html - 无法对齐 span 元素内的 ionicons

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 文件:

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

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

帮助将不胜感激。

Answer 1

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

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