[分享]css3文本多行居中显示图片

CSS3 提供了很好的解决方案用于实现多行文本内容居中显示图片。在本文中，我们将介绍如何使用 CSS3 来实现这一效果。首先，我们需要创建一个包裹图片的容器。我们可以使用以下的 HTML 代码： 这...

CSS3 提供了很好的解决方案用于实现多行文本内容居中显示图片。在本文中，我们将介绍如何使用 CSS3 来实现这一效果。

首先，我们需要创建一个包裹图片的容器。我们可以使用以下的 HTML 代码：

<div class="container">
  <img src="image.jpg" alt="Image">
  <p>这是一个多行文本内容。</p>
</div> 

接下来，我们使用 CSS3 样式将图片和文本内容居中对齐。我们需要使用以下的 CSS 代码：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

p {
  margin: 20px 0;
} 

在这个代码中，我们使用了 Flexbox 布局来让图片和文本内容居中对齐。我们设置了 display: flex; 来让容器变为 Flexbox 容器。同时，我们使用了 align-items: center; 和 justify-content: center; 将元素垂直和水平居中对齐。

为了解决文本内容换行的问题，我们还需要使用 flex-wrap: wrap; 让元素在一行的时候自动换行。我们还使用了 text-align: center; 让文本内容在容器的横向居中对齐。

最后，我们使用 max-width: 100%; 和 margin: 0 auto; 将图片水平居中对齐，并使用 margin: 20px 0; 来为文本内容添加上下边距。

使用以上代码，我们就可以实现多行文本内容居中显示图片的效果。