[分享]css中如何让字在图片下面

在网页设计中，我们经常需要在正文中插入图片。如果希望图片下面的文字能够居中对齐，这时候就需要用到CSS样式了。一种常见的方法是通过给图片设置样式，使得图片和文字处于同一行，并且文字垂直居中。代码如下：...

在网页设计中，我们经常需要在正文中插入图片。如果希望图片下面的文字能够居中对齐，这时候就需要用到CSS样式了。
一种常见的方法是通过给图片设置样式，使得图片和文字处于同一行，并且文字垂直居中。代码如下：

<style>
img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
p {
    display: inline-block;
    vertical-align: middle;
}
</style>

<p>
  <img src="your-image.jpg" alt="Your Image" />
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus.
</p> 

这里使用了两个CSS样式：
- `display: inline-block;` 允许元素在一行上显示，并且可以设置宽度、高度和边距等属性。
- `vertical-align: middle;` 控制元素在垂直方向上的对齐方式，使得图片和文字能够居中对齐。
另外，为了使得代码更加清晰易懂，建议将代码部分使用pre标签包裹起来。代码如下：

<style>
img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
p {
    display: inline-block;
    vertical-align: middle;
}
</style>

<pre>
  <p>
    <img src="your-image.jpg" alt="Your Image" />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus.
  </p> 

这样做可以避免代码中的空格、回车等符号被解析成HTML标签中的空格，保持代码的整洁。