Я пытаюсь центрировать шрифт удивительной иконки над изображением, когда мышь витает изображение. Здесь мой 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;
}
Тем не менее шрифт awesome icon немного отображается целиком влево, и значок продолжает мерцать, когда я нахожу изображение. Вот мой JSFiddle: http://jsfiddle.net/fns8byfj/1/