How do I place text under an image?

Question

I am trying to create a percentage circle image with text underneath. I am not sure where to place the text so that it goes underneath. Right now it goes to the right side of the image. Thanks!

            <div class="col-sm-3 wow fadeInDown text-center">
                <div class="c100 p39 medium orange">
                    <span>39%</span>
                    <div class="slice">
                        <div class="bar"></div>
                        <div class="fill"></div>
                    </div>
                </div>
            </div>
            <p class="lead"> example placeholder text </p>

Answer 1

You can simply put ap tag that automatically breaks like that :

<img id="myImage" src="...">
<p>My percentage</p>

Answer 2

I tried to run your code but the output is:

39%

example placeholder text

i didn't get what you said... but if you want to put your text underneath your image
executing/coding the image first will do, if not
then use CSS instead. :D

 <img src="">
 <p>Example placeholder text</p>

Answer 3

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-sm-3 wow fadeInDown text-center"> <div class="c100 p39 medium orange"> <span>39%</span> <div class="slice"> <div class="bar"></div> <div class="fill"></div> </div> </div> <p class="lead"> example placeholder text </p> </div> 

The reason for why it does that is because you are using bootstrap and putting the text outside the col-sm-3 div which will tell the code to put the next part in the overflowing columns. If you put it inside it will end up under it. See snippet.

Answer 4

This worked:

CSS:

.col-sm-3 { display: flex; flex-wrap: wrap; }