css - 垂直居中的 Font Awesome 图标具有动态高度？

首先，这是我要完成的工作：http://i.imgur.com/EfKt16k.png

但是我希望能够使图标垂直居中，无论文本是一两行。我试过使用标签以及使用psuedo：after元素。我什至还没有接近。我希望整个区域都是可点击的。有什么建议么？

这是一个示例：http://jsfiddle.net/a4x8p/

body { background: #e8e8e8; }
a { background: #68cdf0;
    border: 1px solid #fff;
    display: block;
    color: #fff;
    width: 200px;
    text-decoration: none;
    padding: 5px;
}
a i { float: right; vertical-align: middle; }

最佳答案

您可以使用特定性覆盖.fa类，并避免使用！important。

在图标字体元素上使用选择器的高度特异性设置display:table-cell; vertical-align: middle;，以覆盖font-icon .fa类继承的CSS属性。

a i.fa.fa-caret-right { display:table-cell; vertical-align: middle; }

然后将display:table;添加到链接。

a { background: #68cdf0;
    border: 1px solid #fff;
    display: block;
    color: #fff;
    width: 200px;
    text-decoration: none;
    padding: 5px;
    display:table;
}

演示http://jsfiddle.net/a4x8p/4/

关于css - 垂直居中的 Font Awesome 图标具有动态高度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25150073/