[分享]css3怎么输入文字居中显示图片

CSS3是一种广泛应用于HTML网页设计的样式语言，它可以为网页元素添加各种视觉效果和布局效果。其中，文字和图片的居中显示是网页设计中经常会用到的特效。接下来，我们将详细介绍如何使用CSS3实现输入文...

CSS3是一种广泛应用于HTML网页设计的样式语言，它可以为网页元素添加各种视觉效果和布局效果。其中，文字和图片的居中显示是网页设计中经常会用到的特效。接下来，我们将详细介绍如何使用CSS3实现输入文字居中显示图片的效果。

<div>
<div class="container">
  <img src="path/to/image.png" alt="example">
  <p>这是一段文字，居中显示图片</p>
</div>
</div> 

首先，可以在HTML中添加一个包含图片和文字的容器，设置class为container。

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

然后，在CSS文件中为该容器设置样式，采用Flexbox布局，实现容器内元素的居中对齐。将flex-direction设为column，则容器内的元素在竖直方向上排列。同时，通过justify-content和align-items属性设置元素在主轴和交叉轴上的居中方式。

最后，通过给图片设置width属性为100%，来适应容器的宽度；给p标签设置text-align属性为center，使文字居中对齐。

.container img {
  width: 100%;
}

.container p {
  text-align: center;
} 

这样，输入文字居中显示图片的效果就实现了。