CSS - Centering a heading in the middle of an image

Question

I'm trying to centre a h3 heading in the middle of an image and can't get it right. I have 3 images across one row - four columns per image/heading. Here's how it's supposed to look -

So far I have the images centred but need to put the headings inside each image -

I'm unsure whether I need to style up each individual heading/image or is there a way to do this under one class/id ?

I haven't styled the text up yet (needs to be smaller and white) and the images are purposely different.

Here's my code as it stands -

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>

I've tried a few different variations on position relative/absolute but haven't been able to get it right. I've centred the images using this css -

CSS

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

The section has two rows with text in the row above. I haven't included that code as didn't think it relevant.

Any assistance would be appreciated.

@lumio it might not be appropriate to have them as background images. — sol, Jun 28 '17 at 10:04
True, in some cases. But in this case it seems to be just fine. — lumio, Jun 28 '17 at 10:05

score 2 · Accepted Answer · answered Jun 28 '17 at 10:06

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

Great, thanks. Works fine, I'll reduce the text size in my css file. — Mike.Whitehead, Jun 28 '17 at 10:10

score 1 · Answer 2 · answered Jun 28 '17 at 10:06

#video,
#blog,
#faq {
  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="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>

CSS - Centering a heading in the middle of an image

2 Answers2