如何在圖片下方放置文字？

Question

我正在嘗試創建下面帶有文本的百分比圓圖像。 我不確定將文本放置在何處。 現在，它轉到圖像的右側。 謝謝！

            <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

您可以簡單地放置ap標簽，它會像這樣自動中斷：

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

Answer 2

我嘗試運行您的代碼，但輸出為：

39%

example placeholder text

我聽不懂你說的話...但是如果你想把文字放在圖片下方
如果不執行，則首先執行/編碼圖像即可
然后改用CSS。 ：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> 

這樣做的原因是因為您正在使用引導程序並將文本放在col-sm-3 div之外，這將告訴代碼將下一部分放在溢出列中。 如果將其放入其中，它將最終位於其下方。 請參見摘要。

Answer 4

這工作：

CSS：

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