如何在Bootstrap 3中将Font Awesome图标居中在图像上方？

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>

我可以使用

元素上的::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都可以。

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

提前致谢。

- Rey

---

使用百分比作为边距和填充怎么样？ - bhansa

你尝试过使用 top 和 left 属性吗？类似这样的代码 top: calc(50% - width) 和 left: calc(50% - width)，其中的 width 是你的图标宽度。 - philr

我也尝试了使用 calc 函数。我设法解决了特定显示大小的问题，但当它再次转换为桌面模式时，它变得扭曲了。我尝试了类似于 left: calc(50% - 10em); 的东西，但并没有为所有大小修复问题，因为当 Bootstrap 调整大小时，它会破坏一切 :( - Rey

calc()在这种情况下有点不够灵活。使用translate()会是更好的选择。设置一次，然后忘记它。居中的元素可以是任何宽度/高度，而无需为各种媒体查询重新声明calc()值或更新它。 - hungerstar

是的，这就是正确的答案，非常感谢 @hungerstar :) 你帮我省了很多功夫。干杯！ - Rey

Answer 1

这是一个常见的叠加问题。典型的答案是在相对定位父元素内使用绝对定位和 translate。

• 确保父元素具有 position: relative;，以防止绝对定位的叠加元素出现在不需要它的位置。我们通过这种方式来包含叠加元素。
• 将 position: absolute; 应用于叠加元素。将 left 和 top 设置为 50%。这会使叠加元素的左上角到达父元素的中心。
• 使用 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;来解决它。

- hungerstar

---

我认为你理解了我的意思，让我试一下，如果在我的情况下有效，这将是正确的答案 :) - Rey