PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 17, 2022

[FIXED] How to vertically align on an image overlay card in Bootstrap 4?

 November 17, 2022     bootstrap-4, css, html, overlay, vertical-alignment     No comments   

Issue

I'm trying to center a FontAwesome icon in the center of an Image Overlay Card and I'm being unable to center it vertically.

I've tried multiple other suggestions such as using d-flex and justify-content-center but none seem to work. What am I missing?

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

I want the icon to be centered in the middle of the image, but can only align it horizontally and not vertically. Thank you for your help.


Solution

You can add d-flex class to your .card-img-overlay element, then add class="align-self-center mx-auto" to the inner a element:

<div class="card bg-dark text-white">
   <img class="card-img" src="images/example.jpg" alt="Example">
   <div class="card-img-overlay d-flex">
     <a class="align-self-center mx-auto" data-fancybox href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
       <i class="fa fa-youtube fa-5x zoom" style="color:#FF0000"></i>
     </a>  
   </div>
</div>

More info about align-self-center on official BS4 doc: https://getbootstrap.com/docs/4.3/utilities/flex/#align-self



Answered By - atx
Answer Checked By - David Goodson (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing