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

Question

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

但我希望能够将图标垂直居中，而不管文本是一行还是两行。我试过使用标签以及使用伪 :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; }

Answer 1

您可以使用特殊性覆盖类 .fa 并避免使用 !important。

设置显示:表格单元格； vertical-align: middle; 在 icon 字体元素上对选择器使用高级别特异性，以覆盖 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/