尝试将我的图标字体元素对齐在中心不起作用

Question

当我将鼠标悬停在图像上时，我正在尝试做一个效果，我想显示一个关闭的暗框，当盒子关闭时，我想在我的图像中心显示一个图标字体。

效果已经起作用，但我的图标字体没有保持居中。

我已经尝试过margin:0 auto, text-align:center，但没有任何效果。

我在这里格式化我的图标字体：

#info>i 
    {
        font-size:1.7em;
        color:#ccc;
        margin:0 auto;
    } 

但只有color和font-size在工作，margin、text-align等不起作用。有人明白这里会发生什么吗？

我的jsfiddle显示问题：

http://jsfiddle.net/mibb/TLSSN/

我的网页：

<div class="view second-effect">
      <img src="image1.jpg"  />
      <div class="mask">
      <a href="#" id="info"><i class="fa fa-download"></i></a>       
</div>

我的 CSS：

#info>i 
{
    font-size:1.7em;
    color:#ccc;
    margin:0 auto;
} 
.view a#info 
{
    display: inline-block;
    padding:0;
    width:20px;
    height:20px;
}
.view 
{
    width: 155px;
    height: 160px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 0px 0px 5px #aaa;
    cursor: default;
    margin-right:20px; 
    border:3px solid #ccc;
    margin-top:4px; 
}
.view .mask, .view .content 
{
    width: 155px;
    height: 160px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.second-effect .mask 
{
    opacity: 0;
    overflow:visible;
    border:0px solid rgba(0,0,0,0.7);
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.second-effect:hover .mask 
{
    opacity: 1;
    border:78px solid rgba(0,0,0,0.7);
}

Answer 1

所以我很确定您将图标的 0,0 坐标与中心对齐，而不是将图标的中心与父项的中心对齐。

我通过添加以下内容使您的小提琴工作：

margin-top:-12px;
margin-bottom:-12px;
// This would work too
margin: -12px 0;

JSFiddle

顺便说一句，您可以通过左侧的"外部资源"选项卡将字体真棒或任何其他外部文件添加到 JSFiddle 中。