[分享]css中如何让文字在图片正下方

在CSS中让文字在图片正下方非常简单，只需要使用一些基本的CSS属性和样式即可。本篇文章将通过使用p标签和pre标签来演示如何实现这个效果。首先，我们需要在HTML中定义一个包含文字和图片的段落。这个...

在CSS中让文字在图片正下方非常简单，只需要使用一些基本的CSS属性和样式即可。本篇文章将通过使用p标签和pre标签来演示如何实现这个效果。
首先，我们需要在HTML中定义一个包含文字和图片的段落。这个段落可以使用p标签来实现，如下所示：

HTML
<p>
  这是一段文字，这个段落包含一个图片。图片通常会独占一行，
  我们需要使用一些CSS样式来让文字在图片正下方而不是图片的旁边。
  <img src="example.jpg" alt="example">
</p> 

接下来，我们需要在CSS中定义一些样式来实现这个效果。我们可以使用display属性将图片设置为块级元素，这样它就会独占一行。我们还可以使用text-align属性将文字水平居中对齐，并使用vertical-align属性将文字垂直居中对齐。如下所示：

CSS
p {
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
  vertical-align: middle;
} 

我们还可以使用pre标签来演示这个效果。pre标签会保留文字中的空格和换行符，并将它们显示在浏览器中。同样，我们需要将图片设置为块级元素，并在pre标签中使用text-align属性将文字水平居中对齐。如下所示：

HTML
<pre>
  这是一段文字，这个段落包含一个图片。图片通常会独占一行，
  我们需要使用一些CSS样式来让文字在图片正下方而不是图片的旁边。
  <img src="example.jpg" alt="example"> 

CSS
pre {
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
} 

通过使用这些基本的CSS属性和样式，我们可以很容易地让文字在图片正下方，达到更美观的效果。