Question

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

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

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。

使用选择器的高级别特性在图标字体元素上设置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;
}

DEMO http://jsfiddle.net/a4x8p/4/

垂直居中的字体真棒图标与动态高度？

1 个答案: