html - 在中心发布对齐图标字体

Question

我正在尝试在图标字体背景的中心放置我的箭头图标字体。

但是它不起作用。因为为此我需要给我的图标字体箭头留出边距，但是这个图标字体有背景，所以我对我的图标字体所做的就是对我的背景所做的...

谁知道我该如何解决这个问题？

我的 jsfiddle 问题说明:

http://jsfiddle.net/mibb/tF4L5/

我的 Html:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <div class="unslider-arrow prev"><i class="fa fa-chevron-left"></i></div>
        <div class="unslider-arrow next"><i class="fa fa-chevron-right"></i></div>

我的CSS:

.unslider-arrow 
{
    display:inline-block;
    position:absolute;
}

.prev 
{
    top:95px;
    left:0px;
}

{
    top:95px;
    right:0px;
}

.prev >i{color:#000; font-size:1.5em; background:rgba(0,0,0,0.7); width:40px; height:40px;}
.next >i{color:#000; font-size:1.5em; background:rgba(0,0,0,0.7);width:40px; height:40px; }
.prev >i:hover{color:#ccc; cursor:pointer;}
.next >i:hover{color:#ccc;cursor:pointer; }
.next 

Answer 1

将 line-height: 40px; 和 text-align: center; 添加到你的 i 元素。

它应该是你周围父元素的高度，在你的例子中它是 40px。

.prev >i,
.next >i {
    line-height: 40px;
    text-align: center;
}

Working Fiddle