在CSS中让文字在图片正下方非常简单,只需要使用一些基本的CSS属性和样式即可。本篇文章将通过使用p标签和pre标签来演示如何实现这个效果。首先,我们需要在HTML中定义一个包含文字和图片的段落。这个...
在CSS中让文字在图片正下方非常简单,只需要使用一些基本的CSS属性和样式即可。本篇文章将通过使用p标签和pre标签来演示如何实现这个效果。
首先,我们需要在HTML中定义一个包含文字和图片的段落。这个段落可以使用p标签来实现,如下所示:
HTML
<p>
这是一段文字,这个段落包含一个图片。图片通常会独占一行,
我们需要使用一些CSS样式来让文字在图片正下方而不是图片的旁边。
<img src="example.jpg" alt="example">
</p>
CSS
p {
text-align: center;
}
img {
display: block;
margin: 0 auto;
vertical-align: middle;
}
HTML
<pre>
这是一段文字,这个段落包含一个图片。图片通常会独占一行,
我们需要使用一些CSS样式来让文字在图片正下方而不是图片的旁边。
<img src="example.jpg" alt="example">
CSS
pre {
text-align: center;
}
img {
display: block;
margin: 0 auto;
}