如何在 select2 选项中垂直居中图标？答案

【问题标题】：How to vertically center a icon within select2 option?如何在 select2 选项中垂直居中图标？
【发布时间】：2013-12-29 15:35:05
【问题描述】：

我有一个select2 plugin，其中包含已格式化的选项。我在右侧添加了一个很棒的图标。但它不是垂直对齐的，尊重选择选项。这张图片不言自明：

为了把它放在右边，我添加了float: left; position: relative;。

检查这个小提琴：http://jsfiddle.net/uAnLJ/10/

CSS

body {
    padding: 20px;
}

.fa-check-circle{
    float: right;
    position: relative;
}

function format(referencia) {
    if (!referencia.id) return referencia.text; // optgroup

    if ($(referencia.element).data('active') == "1") {
        return referencia.text + "<i class='fa fa-check-circle'></i>";
    } else {
        return referencia.text;
    }
}

$("#mysel").select2({
    width: "100%",
    formatResult: format
});

HTML

<select id="mysel">
    <optgroup label="First group">
        <option value="0" data-active="1">Hello</option>
        <option value="1" data-active="0">Stack</option>
    </optgroup>
    <optgroup label="Second group">
        <option value="2" data-active="1">Overflow</option>
        <option value="3" data-active="1">Friends</option>
    </optgroup>
</select>

你有什么想法/替代方案吗？

如果您需要更多信息，请告诉我，我会编辑帖子。

【问题讨论】：

标签： css css-float vertical-alignment jquery-select2 font-awesome

【解决方案1】：

像这样向.fa-check-circle 添加一些填充如何：

padding-top:2px;

【讨论】：

【解决方案2】：

在此处添加line-height：

.fa-check-circle {
    float: right;
    position: relative;
    line-height: 20px;
}

LIVE DEMO

【讨论】：