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

你可以简单地把一个p标签自动打破：

<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

＆＃13;

% 3

＆＃13;

之所以这样做是因为你使用bootstrap并将文本放在col-sm-3 div之外，这将告诉代码将下一部分放在溢出列中。如果你把它放在里面它将最终在它下面。请参阅代码段。

如何在图像下放置文字？

3 个答案: