垂直居中字体令人敬畏的图标与动态高度

Question

首先这是我想要完成的:https://i.stack.imgur.com/6s90H.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; }

Answer 1

你可以使用专一性覆盖。fa类，避免使用!important.

在icon font元素上设置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链接。

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/