css 图片上加文字居中

介绍： 在网页设计时，图片是一个非常重要的元素。有时候我们需要在图片上加上一些文字或者标签，以便于更好的传达信息。而如果我们想要将这些文字或者标签居中显示，该怎么实现呢？本文将介绍一种CSS技术，帮助你轻松地实现在图片上加文字并居中的效果。 实现方法： 首先，我们可以使用HTML的img标签引入图片，然后再在img标签外部加一个div标签，用来装载文本。代码如下：

      <div class="image-container">
              <img src="your-image-url" alt="your-image-description">
              <p>你要添加的文字信息</p>
      </div>

接下来，我们可以使用CSS来让文本居中显示。我们可以使用FlexBox或者Grid布局实现这个效果。这里我们使用FlexBox布局。 定义一个外部div，然后将其样式设置为display: flex，并且将它的Flex主轴（Flex-direction）方向设置为垂直方向（column）。这样，我们就能够轻松地将图片和文本在纵向方向上居中。接着，定义一个文本居中的样式，代码如下：

      .image-container {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
      }
      .image-container p {
              text-align: center;
      }

在这里，我们使用justify-content和align-items属性分别将图片和文字居中对齐。而text-align属性则使用来控制文本在水平方向上的居中对齐。 效果预览： 这样，我们就能够轻松地实现在图片上添加文本并让它居中显示的效果了。以下是一个示例：

在这张照片中，我们使用了CSS技术在图片上添加了一段文字，并让它居中显示。

This is a placeholder image

参考链接： https://www.freecodecamp.org/news/how-to-add-text-over-an-image-on-hover-and-fancy-looking-css-effects/