如何在bootstrap 3中的图像上居中使用字体真棒图标？

Question

我试图将font-awesome图标集中在图像上bootstrap 3.

这是div中包含的图像代码:

<div id="quickVideo">
    <a data-fancybox href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo">
        <img src="~/Images/..." class="img-responsive">
    </a>
</div>

我可以使用::beforediv元素,但问题是它默认情况下没有响应.

.adminDemoVideo::before {
    font-family: 'FontAwesome';
    content: '\f04b';
    margin-top: 1.35em;
    margin-left: 2.8em;
    color: white;
    z-index: 1000;
    font-size: 50px !important;
    position: absolute;
    padding-bottom: 3px;
    padding-top: 3px;
    padding-left: 25px;
    padding-right: 15px;
    background-color: rgba(23, 35, 34, 0.75);
    border-radius: 5px 5px 5px 5px;
}

以下是桌面显示尺寸的样子:

当我把它变成移动或平板电脑的视图大小时,它会因为边距等而变形,如下所示:

有没有办法在不知道屏幕尺寸的情况下修复它？不要紧,对我来说,如果解决方案是css或javascript或jquery.

希望这不重复,但在这里找不到任何合适的解决方案......

提前致谢.

Answer 1

这是一个常见的重叠问题.典型的答案是使用绝对定位,在相对定位的父级内部进行翻译.

• 确保父级具有position: relative;绝对定位的覆盖元素不会在您不想要它的地方结束.我们通过这样做包含叠加层.
• 应用于position: absolute;叠加元素.适用50%于left和top.这会将overlay元素的左上角移到父元素的中心.
• 使用transform: translate( -50%, -50% );向上和向左50%移动覆盖它的宽度和高度.现在叠加的中心位于父级的中心.

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
@import url( 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );

.adminDemoVideo {
  position: relative;
  display: inline-block;
}
.adminDemoVideo::before {
    content: '\f04b';
    z-index: 5;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50% );
    padding: 3px 15px 3px 25px;
    color: white;
    font-family: 'FontAwesome';
    font-size: 50px !important;
    background-color: rgba(23, 35, 34, 0.75);
    border-radius: 5px 5px 5px 5px;
}

<a href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo">
  <img src="http://placehold.it/1200x800/fc0" class="img-responsive">
</a>

请注意,锚点所包含的图像将创建少量的空白区域,这些空白区域留给文本中的下降区,因此从技术上讲,它不会100%垂直居中.如果这是一个问题,您可以通过将图像设置为删除它display: block;.