如何在引导程序 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>

我可以在 div 元素上使用 ::before 来做到这一点，但这里的问题是它默认不响应。

.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。这会将覆盖元素的左上角移到父元素的中心。
• 使用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; 来删除它。