How to add text underneath the centered image

Question

On this question there is a great solution on how to add centred image to the page.

Pure CSS solution

Not breaking the document flow (no floats or absolute positioning)

Cross browser compatibility (even IE6)

Completely responsive.

vertically centered

The solution http://jsfiddle.net/avrahamcool/d89xh/

* {
  padding: 0;
  margin: 0;
}
#over {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
}
.Centerer {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.Centered {
  display: inline-block;
  vertical-align: middle;
}

<div id="over">
  <span class="Centerer"></span>
  <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

But how to modify that solution to add an extra text just underneath the centered image so it will be always centered as well.

Any thoughts?

Praveen Kumar Purushothaman · Accepted Answer · 2016-01-18T13:05:16.840

4

You can use <figure> and <figcaption>:

<figure>
  <img />
  <figcaption>Image</figcaption>
</figure>

And give the parent element, text-align: center;.

Snippet

.center {text-align: center;}

<div class="center">
  <figure>
    <img src="http://placehold.it/250?text=IMG" alt="">
    <figcaption>Hello</figcaption>
  </figure>
</div>

Preview:

Fiddle: http://jsfiddle.net/0p53fxgk/

Preview:

Cross Browser Check

Internet Explorer 9
IE Edge
Firefox
Chrome
Opera

For IE below 9, you can use:

figure, figcaption {display: block;}

edited Jan 18 '16 at 13:05

answered Jan 18 '16 at 13:01

Praveen Kumar Purushothaman

164,888
24
203
252

2

Is that solution crossborswer like the one I mentioned in the question? – Sergino Jan 18 '16 at 13:04
@sreginogemoh Yes buddy. Updated in your fiddle too. – Praveen Kumar Purushothaman Jan 18 '16 at 13:05
1

OK I see. Is there any way to make it vertically centered as well line in the example I mentioned ? – Sergino Jan 18 '16 at 13:08
@sreginogemoh Yes possible. Do you knwo the dimensions of the image? – Praveen Kumar Purushothaman Jan 18 '16 at 13:09
Yes that will be about `487x437px` – Sergino Jan 18 '16 at 13:10
@sreginogemoh Awesome. Then it is easy... Lemme create a jsbin for you. – Praveen Kumar Purushothaman Jan 18 '16 at 13:10
@sreginogemoh Have any height for the `#over`. See this **http://output.jsbin.com/hetoridaqi** being responsive. But for fixed width. It is always centered and vertically middle. – Praveen Kumar Purushothaman Jan 18 '16 at 13:14
@sreginogemoh ***ps: Works for IE 6 as well.*** – Praveen Kumar Purushothaman Jan 18 '16 at 13:14

How to add text underneath the centered image

1 Answers1