没有绝对或相对定位的中心图标？

Question

我正在尝试将 Font Awesome 图标置于 img 的中央。但是我的标记没有绝对定位或相对定位，但布局是用 flexbox 完成的。

我插入了带有 CSS 属性选择器的图标：

a[href*="youtu"]::before {
    font-family: 'FontAwesome';
    content: "\f144";
    font-size: 2.5em;
}

这是标记：

<div id="lightgallery">
  <a href="http://local.wordpress.dev/wp-content/uploads/2016/09/image10.jpg"> 
    <img src="http://local.wordpress.dev/wp-content/uploads/2016/09/image10.jpg" alt="" /> 
  </a>
  <a href="http://local.wordpress.dev/wp-content/uploads/2016/09/image9.jpg"> 
    <img src="http://local.wordpress.dev/wp-content/uploads/2016/09/image9.jpg" alt="" /> 
  </a>
  <a href="http://local.wordpress.dev/wp-content/uploads/2016/09/image8.jpg"> 
    <img src="http://local.wordpress.dev/wp-content/uploads/2016/09/image8.jpg" alt="" /> 
  </a>
  <a href="https://youtu.be/5Z3Exfzz8Kk" data-poster="http://local.wordpress.dev/wp-content/uploads/2016/09/video-thumb.jpg"> 
    <img src="http://local.wordpress.dev/wp-content/uploads/2016/09/video-thumb.jpg" alt="" /> 
  </a>

和 css:

@media screen and (min-width: 48em) {
  #lightgallery a {
    width: calc(100% / 3);
    height: 240px;
  }

  #lightgallery img {
    width: 100%;
    background-image: url();
    background-repeat: no-repeat;
    height: 240px;
    object-fit: cover;
  }

  #lightgallery {
    display: flex;
    flex-wrap: wrap;
    margin: 6.25em 0;
  }
}

但我无法让图标位于 YouTube 图片的中央。我可以通过将属性选择器设置为 display: flex; 和 justify-content: center; 来使其垂直居中。这就是我能做到的。

有什么想法可以在不更改标记的情况下实现这一点？

Answer 1

我认为没有绝对定位是做不到的。下面的代码可以帮助你。

#lightgallery a {
    width: calc(100% / 3);
    height: 240px;

    text-decoration: none;
    position: relative;    
}

a[href*="youtu"]::before {
    font-family: 'FontAwesome';
    content: "\f144";
    font-size: 2.5em;

    position: absolute;      
    top: 0;
    left: 0;
    width: 100%;             
    height: 100%;            
    display: flex;             
    justify-content: center;  
    align-items: center;     
}

Demo

没有绝对或相对定位的中心图标？

Center icon without absolute or relative positioning?

html

css

flexbox

positioning

font-awesome