相关疑难解决方法(0)

当鼠标悬停在图像上时,我正试图将字体上的字体真棒图标居中.这是我的HTML:

<div class="profile-img-container">
    <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
    <i class="fa fa-upload fa-5x"></i>
</div>

我的CSS:

.profile-img-container {
    position: relative;
}

.profile-img-container img:hover {
    opacity: 0.5;
}

.profile-img-container img:hover + i {
    display: block;
    z-index: 500;
}

.profile-img-container i {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

但是,字体真棒图标会一直显示在左侧,当我悬停图像时图标会保持闪烁.这是我的JSFiddle:http: //jsfiddle.net/fns8byfj/1/