[英]How do I place text under an image?
我正在尝试创建下面带有文本的百分比圆图像。 我不确定将文本放置在何处。 现在,它转到图像的右侧。 谢谢!
<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>
您可以简单地放置ap标签,它会像这样自动中断:
<img id="myImage" src="...">
<p>My percentage</p>
我尝试运行您的代码,但输出为:
39%
example placeholder text
我听不懂你说的话...但是如果你想把文字放在图片下方
如果不执行,则首先执行/编码图像即可
然后改用CSS。 :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>
这样做的原因是因为您正在使用引导程序并将文本放在col-sm-3 div之外,这将告诉代码将下一部分放在溢出列中。 如果将其放入其中,它将最终位于其下方。 请参见摘要。
这工作:
CSS:
.col-sm-3 { display: flex; flex-wrap: wrap; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.