[英]How do I place text under an image?
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>
You can simply put ap tag that automatically breaks like that : 您可以简单地放置ap标签,它会像这样自动中断:
<img id="myImage" src="...">
<p>My percentage</p>
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. 然后改用CSS。 :D
:d
<img src="">
<p>Example placeholder text</p>
<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. 这样做的原因是因为您正在使用引导程序并将文本放在col-sm-3 div之外,这将告诉代码将下一部分放在溢出列中。 If you put it inside it will end up under it.
如果将其放入其中,它将最终位于其下方。 See snippet.
请参见摘要。
This worked: 这工作:
CSS: CSS:
.col-sm-3 { display: flex; flex-wrap: wrap; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.