絶対位置または相対位置なしの中央アイコン？

Question

私はimg上にFont Awesomeアイコンを配置しようとしています。しかし、私のマークアップは絶対的でも相対的でもなく、レイアウトはフレックスボックスで行われます。

私はCSSの属性セレクタにアイコンを挿入した：

<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; 
    } 
} 

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

そして、ここでは、マークアップですしかし、私は私を得ることができない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