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

The CSS and JS codes are not successfully integrating into the webpage

I am encountering an issue with loading CSS and JS files onto my page. My project involves PHP and Xampp. The file structure is as follows: My Site - CSS - index.css - JS - index.js - Index.php (Apologies for the lack of a folder tre ...

javascriptphphtmlcss

Tips for organizing and concealing images within a Div for seamless transitions (no need for floats)

Currently, I am working on a grid layout for my website. My goal is to have 9 images load quickly, and then once the page has loaded, I want to fetch additional images, insert them into the image containers, and animate between them. While I understand how ...

javascripthtmlcssimage

Place the divs over the background image by using relative positioning

I am working on a project where I have a full-width div with a background image containing people. I want to display a tooltip when hovering over each person, but I am facing challenges in aligning the divs properly. Image maps with % widths do not seem t ...

csshtmlimagemap

``Is it possible to retrieve the value of an <option> tag in a Django view?

My form includes an option to select the country you are coming from. Within my model, I have a field called country_living with the following choices: LIVING_COUNTRIES = [ ('AFGANISTAN', 'Afganistan'), ('ALBANIA', &ap ...

htmldjangoformsdjango-modelsdjango-views

Revamping the Look: Refreshing Background of Div

I'm attempting to change the background image of the body element on a webpage when I hover over links with data-* attributes. It's working perfectly, but I can't seem to figure out how to create a smooth fade between the images when a link ...

javascriptjquerycsshoverbackground-image

The HTML checkbox is initialized as checked when the page loads

Is there a way to set the checkbox as unchecked in HTML? I have tried multiple ways, but it always loads as checked <input id="chkBox" checked type="checkbox" /> <input id="chkBox" checked=false type="checkbox" /> <input id="chkBox" checked ...

htmlcheckbox

CSS - owl carousel automatically stretches images to full width

Here is the code snippet that I am working with: $(document).ready(function() { $('.owl-carousel').owlCarousel({ loop:true, items:4, autoplay:true, autoplayTimeout:2000, autoplayHoverPause:true }); }); #owl-demo ...

javascripthtmlcss

Enhance your navigation bar with hover styles in React Router Dom v6

I'm having an issue with my navbar where the active styles are overriding the hover state. I want to maintain my hover state styles even on the active nav link. How can I achieve this? Here is what's currently happening: Active nav styles (look ...

cssreactjsnavbarreact-router-dom

What causes inline-blocks to malfunction after a non-breaking space is inserted?

Here is some HTML code: <p id='one'>Hello World how are you.&nbsp;<span>Entrepreneur</span></p> <p>Hello World how are you.&nbsp;<span>Entrepreneur</span></p> Below is some CSS styling: ...

css

Enhance your figures with a unique Javascript magnifying tool that works seamlessly across all browsers

After searching the web for magnifying glasses, I found that most only work for one picture. So, I took matters into my own hands and created a magnifying glass that can magnify all pictures within a specific div. It functions perfectly on Chrome browser b ...

javascriptjquerycss

Changing the main domain of links with a specific class attribute during an onmousedown event - is it possible?

We are facing a situation where we have numerous webpages on our blog that contain links from one domain (domain1.com) to another domain (domain2.com). In order to avoid manual changes, we are attempting to achieve this without altering the link (href). Th ...

javascripthtml

Exploring the object tag box model and its properties for width and padding in Firefox version 6

Hey there, I've been puzzled by the fact that my Firefox browser seems to be using a different box model for my video embeds compared to Chrome. Even though the same CSS rules are being applied, if the object tag includes attributes like data="whateve ...

firefoxobjectpaddingcss

Align the tops of the tables

I currently have three tables in my HTML code. When all three tables are filled with data (10 rows each), they appear correctly aligned as shown in the first picture. However, if any of the tables do not have the maximum capacity of 10 rows reached, they ...

htmlcsshtml-table

Grammarly is seamlessly inserting padding into my body element

After setting up my website on GitHub, I ran into an issue where the Grammarly Chrome extension was automatically adding a padding-top attribute to the body tag. <body data-new-gr-c-s-check-loaded="14.1028.0" data-gr-ext-installed="" ...

htmlcsstwitter-bootstrap

Tips for aligning a form in the center of a webpage

I have a code snippet using material-ui that I want to center on the page, but it's not working. Can someone please help me fix this issue? Thank you in advance. import React from 'react'; import { makeStyles } from '@material-ui/core ...

cssreactjsmaterial-ui

Using jQuery, encapsulate an image within a div element and transfer the floating style attribute from the image to the div

Can anyone assist me in wrapping an image within a div along with transferring the float setting? This is my current code: $('.photo-img').wrap('<div class="photo-wrap" />'); I would like the new div to inherit the float proper ...

jqueryhtmlcss

Can Spring Boot be set up to return JSON instead of HTML for InvalidTokenException when configuring OAuth2?

When testing my Spring Boot application, I realized that querying one of my REST endpoints with an invalid token using Postman resulted in a response content in HTML format instead of JSON. The endpoint correctly responded with 401 InvalidTokenException, b ...

htmljsonspring-bootoauth-2.0spring-security-oauth2

Encoding a JSON representation of an HTML list where all children are displayed at each parent item

Here is the structured list that I am currently working with: function convert( name_ref ) { name_ref = name_ref + " > ol > li"; var mylist = []; $(name_ref).each(function () { if ($(this).find('> ol > li').length){ myl ...

javascriptjqueryhtmljson

Troubleshooting issue with Calendar styling in Bootstrap and SimpleCalendar Rails integration

I am having trouble applying styling to my SimpleCalendar in Rails, using the gem. When I render it, this is what I see: Here is the CSS provided by https://github.com/excid3/simple_calendar: .simple-calendar { table { -webkit-border-horizontal-spac ...

cssruby-on-railsrubytwitter-bootstrap

several tables all set to the identical TD width

Using a css sheet, I have formatted two tables. The first table is used for filter/sort selection, while the second table is a scrollable data table. div#scrollTableContainer { width: auto; margin: 20px; /* just for presentation purposes * ...

htmlcsshtml-table