Styling CSS for Centering a Heading on an Image's Center

Struggling to center an h3 heading in the middle of an image within a grid? Look no further, as I have 3 images across one row - four columns per image/heading. Check out the desired layout https://i.stack.imgur.com/8VFRt.png

I've managed to center the images but now need to insert headings inside each image - see here for reference https://i.stack.imgur.com/64sQ1.png

Unsure about styling individual heading/image pairs or if it can be done under one class/id?

The text still needs styling (smaller and white) and intentionally different images are being used.

This is what my current code looks like -

HTML

<div class="row"> 
                <div class="four columns"> 
                    <div id="video">      
                        <h3>VIDEO</h3>
                        <img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
                    </div>
                </div>
                <div class="four columns"> 
                    <div id="blog">   
                        <h3>BLOG</h3>
                        <img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
                    </div>    
                </div>
                <div class="four columns"> 
                    <div id="faq"> 
                        <h3>FAQ</h3>
                        <img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
                    </div>    
                </div>
            </div>

Various attempts with position relative/absolute were made without success. The CSS used to center the images is:

CSS

section#welcome img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

There are two rows within the section with text in the row above that hasn't been included here as it's deemed irrelevant.

Your feedback on this issue would be greatly appreciated.

htmlimagecss

Answer №1

.four {
  position: relative;
  display: inline-block;
}

.four h3 {
  position: absolute;
  color: #FFF;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div class="row">
  <div class="four columns">
    <div id="video">
      <h3>VIDEO</h3>
      <img src="https://static.pexels.com/photos/410986/pexels-photo-410986.jpeg" alt="Video" style="width:300px;height:150px;">
    </div>
  </div>
  <div class="four columns">
    <div id="blog">
      <h3>BLOG</h3>
      <img src="https://static.pexels.com/photos/410986/pexels-photo-410986.jpeg" alt="blog" style="width:300px;height:150px;">
    </div>
  </div>
  <div class="four columns">
    <div id="faq">
      <h3>FAQ</h3>
      <img src="https://static.pexels.com/photos/410986/pexels-photo-410986.jpeg" alt="FAQ" style="width:300px;height:150px;">
    </div>
  </div>
</div>

Answer №2

#content,
#info,
#help {
  position: relative;
  display: inline-block;
}

h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="row">
  <div class="four columns">
    <div id="content">
      <h3>CONTENT</h3>
      <img src="images/content.jpg" alt="Content" style="width:300px;height:150px;">
    </div>
  </div>
  <div class="four columns">
    <div id="info">
      <h3>INFO</h3>
      <img src="images/info.jpg" alt="Info" style="width:300px;height:150px;">
    </div>
  </div>
  <div class="four columns">
    <div id="help">
      <h3>HELP</h3>
      <img src="images/help.jpg" alt="Help" style="width:300px;height:150px;">
    </div>
  </div>
</div>

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

"Disappearing act: Navigating through pages causes the navigation

Struggling with navigation in my asp.net core web app development. My directory structure includes the use of Areas. When navigating through pages in the main folder like Index, Index1, and Private, everything works fine. However, once I navigate to an Ar ...

htmlasp.netasp.net-mvcasp.net-corenavigationbar

The correct terminology for divs, spans, paragraphs, images, anchor tags, table rows, table data, unordered lists, list

Just wondering, I've noticed that every time I come across a page element '<###>[content]<###>' and want to learn how to manipulate it, I usually search for something like "how to do x with div" or "how to get y from div". I know that ...

javascripthtml

The alignment of the image background is malfunctioning on the iPad 3 device

Hey there, I need some assistance resolving an issue with a header background image on iPad3. The problem is that the image is not displaying correctly on iPad3 browsers, even though it works fine on desktop browsers. Below you can find my CSS and HTML cod ...

htmlcssbackground

Looking to slide a form on top of an image carousel in Bootstrap - any tips?

How can I move this form over the "carousel"? <html> <head> <title>test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http ...

htmlcssformsbootstrap-4

ways to clear the float on the right side of an image

So I have two images that I am trying to float, like this: img{ float:left; clear:right; } <img src='http://img1.imgtn.bdimg.com/it/u=1005212286,2432746147&fm=21&gp=0.jpg' alt=''><br> <img src ...

htmlcss

Tips for positioning divs on top of an image with Twitter Bootstrap

I'm having an issue with displaying an image and dividing it using bootstrap div columns. The problem is that the image is overlapping the divs, making it impossible to click or attach jQuery events to it. Here is the code I am currently using: #view ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unused DIV elements in jQueryUI are identified using XSLT

Just a heads-up, I'm new to xslt so please bear with me if this seems like a silly question. In my xsl:template I have created a div element like this: <div id="objectLocked"> This object is locked by another user. Do you want to remove the lo ...

htmlcssjquery-uixslt

Unable to Trigger Jquery Scroll Event

I'm trying to figure out why a div is not appearing when the page is scrolled down. The issue is that my page body and most other elements have overflow hidden, except for a table that appears at a certain point on the page when a button is pressed. T ...

jqueryhtmlcssscroll

Style your index with a Wordpress plugin

I've been attempting to modify a plugin's stylesheet, but I'm having trouble locating the CSS file that contains the necessary styles. Despite Chrome's developer tool indicating that it is styled directly on the index site, I have searc ...

phpcsswordpresspluginsstyles

Sorting of tables does not function properly following an ajax request

I built a table that utilizes an AJAX response triggered by selecting a date from a drop-down menu. <!--datepicker--> <div class="col-md-4"> <input type="text" name="date_po_month_picker" id="date_po_month_picker" class ...

jqueryajaxhtml

How about a CSS one-by-one black pixel that's not opaque?

I've been attempting to achieve a 70% transparent black background on an element, but unfortunately, I had to use a pixel to address browser compatibility problems. Using CSS alone would make the entire content of the element transparent as well. Her ...

htmlcss

"Encountering a Javascript issue while trying to apply a CSS class to a

Encountering issues in Safari desktop / mobile and Internet Explorer. The error message states: In Safari: TypeError: Attempted to assign to readonly property. IE Edge: Assignment to read-only properties is not allowed in strict mode The problem arises ...

javascripthtmlvue.js

Incorporation of a dynamic jQuery animation

I'm a beginner in jquery and I'm attempting to achieve the following: I want each menu to collapse separately when the mouse hovers over it. The issue is that both menus collapse simultaneously! I know it's probably something simple, but I ...

javascriptjqueryhtmlcss

Placing text beside an image

I am brand new to osCommerce and recently took over this code. We are looking to improve the layout of the new_products page. Here is the current display code: div class="contentText"> <div class="NewProductsList"> <table border="0 ...

phphtmlcss

Tips for avoiding the display of the overall scrollbar while utilizing grid with an overflow:

In my react-redux application, I am utilizing the material ui Grid component for layout design. The structure of my code is as follows: <div> <Grid container direction="row" spacing={1}> <Grid item xs={3}> ...

javascriptcssreactjslayoutmaterial-ui

Ways to ensure even spacing in a responsive header design

On my homepage, I have a large header image that is responsive in the mobile version. However, I am having trouble managing the spacing between the button and text below it. The spacing varies on different mobile screens and sometimes appears larger than i ...

cssmobileresponsive-designresponsive-images

Problem with Google+ Button Alignment

I arranged my social media buttons in a row - Twitter, Facebook & Google+. The issue is that the Google+ button is not aligning properly. It appears to be spaced out about 3 times further than the Twitter and Facebook buttons. I attempted adjusting the p ...

htmlcssbutton

Ways to broaden the map of a variable in SCSS

Currently, I am utilizing a package known as Buefy, which acts as a Vue.js wrapper for the Bulma CSS framework library. Within Buefy's template components, there is an attribute/property called type (e.g., type="is-warning"). According to the document ...

cssvue.jssassbulmabuefy

What's the reason for the mousewheel functioning in Chrome but not in Firefox?

I am currently using CSS to enable scrolling up and down a popup page with just the mousewheel, but I'm facing an issue with it not working in FireFox. Surprisingly, it works fine in Chrome with the use of overflow-x:hidden; and overflow-y:auto; prope ...

javascriptjquerycss

Utilize a external API to fetch JSON data from the website and showcase it on a webpage in a asynchronous manner

<!DOCTYPE html> <html> <head> <script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> </head> <body> <input type="text" placeholder="Enter Your Zip Code" id="zipCode ...

htmljsonxml