I am facing a challenge in trying to vertically center a FontAwesome icon within an Image Overlay Card. Despite attempting various methods like using d-flex
and justify-content-center
, none of them seem to be effective. What could I be overlooking?
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
<div class="card bg-dark text-white">
<img class="card-img" src="http://placehold.jp/500x200.png" alt="Example">
<div class="card-img-overlay text-center">
<i class="fab fa-youtube fa-5x" style="color:#FF0000"></i>
</div>
</div>
</body>
My objective is to have the icon perfectly centered in the middle of the image, but I can only manage to align it horizontally and not vertically. Your assistance on this matter would be greatly appreciated.