将鼠标悬停在图像上方的 Font Awesome 图标居中

当鼠标悬停在图像上时，我试图将字体很棒的图标置于图像的中心。 这是我的 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/ http://jsfiddle.net/fns8byfj/1/

这里的用法很重要，需要考虑。这是一个触发器，所以我会使用这里的链接。我不会显示：无，因为当选择器上的状态为显示：无或可见性：隐藏时，即使：悬停更改了此状态，IOS也不会处理其中的操作。使用不透明度和位置来“隐藏它”。

很重要：

父级图像的大小不是其内部子图像的大小，除非该 div 是限制其宽度的内容的子级，或者该 div 是浮动的或内联块的。如果您将其放在网格内的一列中，并且图像在任何视口宽度下都与该列一样宽，那么您可以删除 .profile-img-container 上的“内联块”，但是如果您只使用它独立时，您必须浮动它或在其上放置 .inline-block ，但是如果父级是内联块 max-width:100% 不起作用（就像它不工作一样），则必须更改图像的响应能力如果在表格单元格内则不起作用）。

:hover 不是一个好主意，我会使用 jQuery 通过切换父类来实现单击。

DEMO: http://jsfiddle.net/prtkqb44/ http://jsfiddle.net/prtkqb44/

CSS:

.profile-img-container {
    position: relative;
    display: inline-block; /* added */
    overflow: hidden; /* added */
}

.profile-img-container img {width:100%;} /* remove if using in grid system */

.profile-img-container img:hover {
    opacity: 0.5
}
.profile-img-container:hover a {
    opacity: 1; /* added */
    top: 0; /* added */
    z-index: 500;
}
/* added */
.profile-img-container:hover a span {
    top: 50%;
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}
/* added */
.profile-img-container a {
    display: block;
    position: absolute;
    top: -100%;
    opacity: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    color: inherit;
}

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" />
    <a href="#"><span class="fa fa-upload fa-5x"></span></a>
</div>