[分享]css中如何添加文字居中显示图片

在网页设计和开发中，图片是一个非常重要的元素。然而，有时候我们希望在图片下方添加一些文字描述，这时候就需要用到CSS样式来实现图片和文字的居中显示。首先，我们需要在HTML中添加一个图片和一段描述文字...

在网页设计和开发中，图片是一个非常重要的元素。然而，有时候我们希望在图片下方添加一些文字描述，这时候就需要用到CSS样式来实现图片和文字的居中显示。
首先，我们需要在HTML中添加一个图片和一段描述文字。代码如下：

<div class="container">
  <img src="image.jpg">
  <p>这是一段描述文字</p>
</div> 

接下来，在CSS中添加以下样式：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

img {
  width: 100%;
  max-width: 500px;
  height: auto;
}

p {
  margin-top: 20px;
  font-size: 18px;
  color: #333;
} 

上述样式中，我们使用了flex布局，并设置了垂直居中和文本居中。同时，我们给图片设置了一个width属性，这样可以让它自适应屏幕大小。我们还使用了一个max-width属性，这是为了防止图片太大导致布局错乱。最后，我们给文字添加了一些样式，使其看起来更加舒适和易读。
通过这些样式，在网页上展示的效果就是图片和文字居中显示的效果。
总之，在网页设计中，要想实现图片和文字的居中显示，我们可以使用CSS样式对其进行调整。具体来说，我们可以使用flex布局、align属性、文本居中等技巧来实现这一目标。