Achieving Vertical Alignment in a Bootstrap 4 Image Overlay Card

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.

htmlcssbootstrap-4overlayvertical-alignment

Answer №1

If you want to center-align your content within a card overlay, simply include the d-flex class to your .card-img-overlay element. Then, add 

class="align-self-center mx-auto"
to the innermost 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>

To learn more about the align-self-center utility in Bootstrap 4, check out the official documentation here: https://getbootstrap.com/docs/4.3/utilities/flex/#align-self

Answer №2

To enhance the appearance of your card-img-overlay element, you can utilize bootstrap's flex utilities class:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card bg-dark text-white">
   <img class="card-img" src="https://fakeimg.pl/250x100/000000/" alt="Example">
   <div class="card-img-overlay text-center d-flex flex-column justify-content-center">
      <a data-fancybox href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="">
      <i class="fab fa-youtube fa-5x zoom" style="color:#FF0000"></i>
      </a>
   </div>
</div>

Answer №3

It seems like you were on the right track with adding the d-flex and justify-content-center classes, but don't forget to include the align-items-center class as well for a complete solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Handling 404 errors in Nginx when using try_files directive for .html files

When presented with this SEF URL /attrazioni/madame-tussauds-londra.html, I am required to retrieve the actual URL which is /index.php?q=/attrazioni/madame-tussauds-londra.html I currently have a directive in place, however, it functions correctly only fo ...

phphtmlnginxurl-rewriting

How to prevent v-menu from overlapping a navbar in Vue.js

Exploring the examples on the main page of Vuetify, we come across the v-menu component showcased in detail. Check it out here: https://vuetifyjs.com/en/components/menus/#accessibility If you activate any of the buttons to open the v-menu and then scroll ...

javascriptcssvue.jsvuetify.js

Using jQuery to make an Ajax post request that will load the current page with additional form data appended to the

Below is the HTML code for my registration form: <form id="registerForm"> <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required> <inp ...

javascriptjqueryhtmlajax

Having a floating left <UL> list with floating right text boxes positioned below the UL list instead of being set next to it

I'm attempting to align an unordered list on the left and a group of textboxes on the right within a div tag. The problem I'm facing is that the text boxes are positioned below the list items instead of being adjacent to them. .PersonLI { flo ...

htmlcss

Connect and interact with others through the Share Dialogues feature in the

Update - Edit I'm just starting to explore the concept of share dialogues and I want to integrate it into my website. On my site, there is a reaction timer game that shows the user's reaction time in seconds in a modal popup. I want users to be ...

javascripthtmljqueryfacebookshare

Having trouble identifying the source of the margin-right styling being used

I'm facing a perplexing issue with the CSS for my sidebar (#primary) on my website. Even though I haven't specified any margin for the sidebar, it is somehow getting a margin-right of 605px. In trying to solve this, I experimented with relative ...

htmlcss

iPhone 3GS and 4 not expanding DIVs by 100%

I've been encountering a significant issue with a div that's set to 100%. It displays properly on desktop screens, but on iPhones, there appears to be a gap on the right side. I've attempted to use the following CSS: body { min-width:980p ...

jqueryhtmlioscsswidth

What is the best method for incorporating CSS into an Angular application's embedded PowerBI report, which is displayed

Is there a way to incorporate external CSS or another method to apply styles to a PowerBI report embedded in an Angular application as an iframe? Specifically, I want to remove the scrollbar to ensure that the report seamlessly fits within the angular page ...

cssangularpowerbiexternal

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb

As a beginner in Angular >2 development, I am excited to build my first application from scratch. One of the features I'm trying to implement is drawing flow charts using jsPlumb. However, I have encountered an issue where the connectors are not be ...

javascriptcssangularjsplumb

Incorrect data for minimal values within Google charts

Currently, I am utilizing a Google chart found at the following link: In my data set, I have significantly high values for the line chart and relatively low values for the bar chart. In order to make both types of data more easily readable, I would like t ...

javascripthtmlgoogle-visualization

Custom div element obstructs information window on map due to lack of auto panning feature

I created a unique div that is absolutely positioned on a Google Map. You can view the image below to see it. My issue is that the info window is being covered by this custom div element, as demonstrated in the picture. https://i.stack.imgur.com/1TgyQ.jpg ...

javascripthtmlcssgoogle-maps

Using JavaScript import may encounter issues when trying to access the same file or a different file

When importing something and using it, there are certain scenarios where it may not work as expected. For example: <html> <body> <button onclick="foo()">Click Me</button> </body> <script type="module"> ...

javascripthtml

Text "movement/vibration" in screen when adjusting dimensions in Firefox for Mac

I am currently involved in a project centered around showcasing a variety of fonts to users for them to experiment with, allowing them to adjust size and spacing using sliders. While the functionality works seamlessly on Chrome and Safari, a peculiar issu ...

cssfirefoxfont-face

Guide to creating a fixed accordion header in Bootstrap 4

Looking for a way to make the header of a BS4 accordion sticky when it is opened, so that it stays at the top of the screen even when users scroll down Current approach is not achieving the desired result: #accordion .card-header BUTTON:not(.collapsed) { ...

csstwitter-bootstrapbootstrap-4sticky

CSS DROP DOWN NAVIGATION MENU - Struggling to maintain hover effect on main menu item while navigating through sub-menu

I am facing a challenge with a CSS-only drop-down menu where the top main menu item loses its highlight when I move the cursor over the sub-menu items. You can view the menu in action here: . For example, if you hover over "Kids" and then move your cursor ...

css

Struggling with formatting images to ensure consistency in size using HTML and CSS

Currently, as a novice in HTML and CSS, I am encountering image misalignment issues while attempting to make them uniform in size. How can this be rectified? The existing HTML code is shown below: <div class="container text-center"> <h3> ...

htmlcss

An alternative to Beautiful Soup for Python 3.2

Looking to create a web crawler for extracting information from various web pages, I discovered Beautiful Soup which seemed like an excellent tool. It allows me to parse entire documents, create dom objects, iterate through them, and extract attributes sim ...

pythonhtmlweb-crawler

What steps can be taken to ensure that the header elements such as the image, text, and button are

I am currently working on a website project using Bootstrap 5. For the header section of the site, I have incorporated a carousel from Bootstrap that includes images, text, and buttons. My main objective is to ensure that all elements within the carousel ...

htmlcssresponsive-designfrontendbootstrap-5

<datalist> trigger that occurs when a selection is made

I'm currently working on a feature that resembles autocomplete, and instead of creating my own dropdown, I have decided to experiment with the use of < datalist >. I appreciate using native elements as they are compatible across various devices, ...

htmleventsevent-handlingdatalist

What is the best way to ensure a flex element occupies a greater space within another flex element using TailwindCSS?

After spending hours trying different solutions and even resorting to brute force, I am still struggling to make this work. Objective: To increase the width of the cards when the screen size is larger Below is my main component: function App() { const ...

cssreactjsflexboxtailwind-css