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/

我的Html：

<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添加字体真棒或任何其他外部文件。

试图将我的图标字体元素对齐在中心是行不通的

1 个答案: