画像の下にテキストを配置するにはどうすればよいですか？

Question

私は、テキストの下にパーセンテージの円イメージを作成しようとしています。テキストをどこに配置して下になるかわからない。今すぐ画像の右側に移動します。ありがとう！あなたは、単に自動的にそのように壊れるAPタグ置くことができます

  <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

：

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

Answer 2

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

それはそれを行う理由理由は、ブートストラップを使用して入れているためでありますcol-sm-3 divの外側のテキストは、オーバーフローする列に次の部分を配置するようにコードに指示します。あなたがそれを内側に置くと、それはその下に終わるでしょう。スニペットを参照してください。

Answer 3

私はあなたのコードを実行しようとしたが、出力は次のようになります。

39% 

example placeholder text 

私はあなたが言ったことを取得していない... しかし、あなたは
コーディング/実行あなたの画像の下にテキストを入れたい場合最初に画像が表示されますが、そうでない場合は
の代わりにCSSを使用します。 ：D

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

Answer 4

これは働いていた：

CSS：

あなたはかなり厳しいだろう唯一のHTMLマークアップを使用して、このためのCSSの基本を知っておく必要があり

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