Text on the image in multiple DIVs

Question

I have simple CSS container and 3 different DIVs inside which aligned center. In each DIV, there is a image and text above of each image . This so far working fine.

However, I like to put the text over the each image of possible (center inside the image). I tried to play with this instruction (here), but couldn't get it to work. Please help!

Here is the CSS:

.containerCurve1 {
        width:90%; 
        border:0px solid black;
        text-align:center; 
        margin-left:auto; 
        margin-right:auto; 
        background-color:white; 
        border-radius: 25px; 
        padding:20px;
        max-height: 80%;
        height: 80%;
        height:80vh;
    }

.imgLevel1
{
    margin-right:15px;
    width:300px; height:260px;
    background:#B2B4B3;
    padding:12px;
    border:2px solid #FFB652;       
}

.linkImage
{
    text-decoration: none;
}

Here is the HTML:

<div class="containerCurve1">
<div style='display: inline-block; vertical-align: top;'>            
    <a href="page1.html" class="linkImage">
        <span class="titlePicture">Picture 1</span><br>
        <IMG SRC="../project_img/Pic1.png" class="imgLevel1">
    </a>
</div>

<div style='display: inline-block; vertical-align: top;'>
    <a href="page2.html" class="linkImage">
        <span class="titlePicture">Picture 2</span><br>
        <IMG SRC="../project_img/Pic1.png" class="imgLevel1" >
    </a>
</div>

<div style='display: inline-block; vertical-align: top;'>           
    <a href="page3.html" class="linkImage">
        <span class="titlePicture">Picture 3</span><br>
        <IMG SRC="../project_img/Pic1.png" class="imgLevel1" >
    </a>
</div>
</div>

score 2 · Accepted Answer · answered Oct 02 '15 at 20:44

How about putting the span below and using a negative top margin?

.containerCurve1 {
        width:90%; 
        border:0px solid black;
        text-align:center; 
        margin-left:auto; 
        margin-right:auto; 
        background-color:white; 
        border-radius: 25px; 
        padding:20px;
        max-height: 80%;
        height: 80%;
        height:80vh;
    }

.imgLevel1
{
    margin-right:15px;
    width:300px; height:260px;
    background:#B2B4B3;
    padding:12px;
    border:2px solid #FFB652;       
}

.linkImage
{
    text-decoration: none;
}

.titlePicture
{
  display:block;
  margin-top:-150px;
}

<div class="containerCurve1">
<div style='display: inline-block; vertical-align: top;'>            
    <a href="page1.html" class="linkImage">
        <IMG SRC="../project_img/Pic1.png" class="imgLevel1"/>
        <span class="titlePicture">Picture 1</span>
    </a>
</div>

<div style='display: inline-block; vertical-align: top;'>
    <a href="page2.html" class="linkImage">
       <IMG SRC="../project_img/Pic1.png" class="imgLevel1" />
       <span class="titlePicture">Picture 2</span>
    </a>
</div>

<div style='display: inline-block; vertical-align: top;'>           
    <a href="page3.html" class="linkImage">
        <IMG SRC="../project_img/Pic1.png" class="imgLevel1" />
        <span class="titlePicture">Picture 1</span>
    </a>
</div>
</div>

Note: Click "full page" after you run the snippet.

I can see it works on your Full Page, but somehow when I put in my page, the negative top margin pushes everything up. Maybe I am doing something wrong, I will continue playing with it... Thanks for the quick response. — Milacay, Oct 02 '15 at 21:11

Romulo · Answer 2 · 2015-10-02T21:15:56.383

Explanation

There are lots of ways you could achieve this behavior.

One is changing the CSS property positionof the wrapper to relative and of the title to absolute. Afterwards you place the title in the middle of the wrapper using top: 50% and left: 50%. After this you will notice that the element is not exactly centered, because it's own height and width are off the calculation. So we fix with the property transform: translate(-50%, -50%), which brings the element half of it's height up, and half it's width left. The result will be a vertically and horizontally centered element.

Another possibility would be using the CSS property display: flex. That would be easier because the entire layout is handled by the property. You could check more about this in A Complete Guide to Flexbox.

Example

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <style>
    .box {
      margin: 10px;
      display: inline-block;
    }
    .box span {
      font-size: 30px;
      border: 1px solid #000;
      background: #000;
      color: #fff;
    }
    .box.position {
      position: relative;
    }
    .box.position > span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .box.flex {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .box.table {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    .google {
      width: 544px;
      height: 184px;
      background: url('https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat;
    }
  </style>

</head>

<body>

  <div class="box position">
    <img src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    <span>this is centered</span>
  </div>

  <div class="box flex google">
    <span>this is also centered</span>
  </div>

  <div class="box table google">
    <span>and finally this</span>
  </div>

</body>

</html>

Thanks @Romulo. This is very very nice solution. It works on both Mozilla and Chrome, but not IE11 unfortunately. I would great if it could work for IE11 too. — Milacay, Oct 02 '15 at 21:30
@Milacay seriously? all the 3 examples are working fine in IE11 on my PC (windows 7). — Romulo, Oct 02 '15 at 21:35
yes I have IE-11 and Windows 7, I copied/pasted all your codes, then changed the images only. it is all un-align. 1st DIV, the picture on the lift and text floats to right. 2nd DIV text floats top of the picture... — Milacay, Oct 02 '15 at 21:42
oh, I opened it from my Windows 7 laptop it works, but on the Apache server, it is not display correctly. Sorry for the confusion. Do you have any idea why web server renders differently? — Milacay, Oct 02 '15 at 21:43

Text on the image in multiple DIVs

2 Answers2

Explanation

Example