How center text underneath images

Question

I would like to center text underneath images. The images and text in question are in the passphrase generator at this site. I have tried simply adding a <br> in between the images and the text, different display properties, the bottom and top properties, changing flex direction on the text alone, probably more that I can't remember at this time. This is the JS just in case there is something wrong with the way im generating the images and text. All help is greatly appreciated!

The lock it the background makes it really uncomfortable to read, maybe you could make it a little bit more transperant — , May 04 '17 at 08:17
someone asked the same here: http://stackoverflow.com/questions/19138758/how-to-align-caption-underneath-image — MG83, May 04 '17 at 08:40
@kazura , solution that you be marked don't work in IE9 ,IE8 ,IE7 — Ehsan, May 04 '17 at 08:52

score 1 · Answer 1 · answered May 04 '17 at 08:27

You use figure and figcaption elements from html5

<figure>
    <img src="http://www.innomate.com/application/files/4514/8474/3363/front01.png" />
    <figcaption>Testing</figcaption>
</figure>

Here is fiddle to demonstrate: https://jsfiddle.net/twk3abom/

score 0 · Accepted Answer · answered May 04 '17 at 08:26

0

I'd suggest you to wrap your images and phrases in a figure element to break the layout of the parent that has display: flex;. See this fiddle for a quick reference.

answered May 04 '17 at 08:26

osynligsebastian

145
10

score 0 · Answer 3 · answered May 04 '17 at 08:32

0

You need to wrap each <img> and <p> tags inside a <div>. That should do the trick.

So it should look like this,

<div>
    <img>
    <p></p>
</div>
<div>
    <img>
    <p></p>
</div>
...

answered May 04 '17 at 08:32

rishipuri

1,498
11
18

score 0 · Answer 4 · answered May 04 '17 at 08:38

You can try to put each element in a <div> nothing else to change.

This would look like this on HTML:

<div id="passphraseBilder">
    <div>
        <img>
        <p>bowling</p>
    </div>
    <div>
        <img>
        <p>doughnut</p>
    </div>
    <div>
        <img>
        <p>calculator</p>
    </div>
</div>

score 0 · Answer 5 · answered May 04 '17 at 08:48

Try This :

 div {
      width: 200px;
      margin: 0 auto;
      text-align: center;
      border: 1px solid #ccc;
 }

 img {
      width: 100%;
 }

 p {
        color: #fff;
        background-color: #000;
        margin: 1px 1px 2px 1px;
   }

<div id="wrapper">

    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRJqYSNS-A4_Vd8CptMrxXbIFS3q1HaHPHZSnscG1iNSMmrMKRS">
    <p>Flowers</p>
   
 </div>

How center text underneath images

5 Answers5