css p中图片居中显示

CSS让我们可以轻松地控制网页上的元素，包括图片的居中显示。下面，我们来学习一下如何使用CSS让图片居中显示。

p {
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
}

以上是CSS样式代码，在p标签中设置text-align样式属性为center，即可以使p标签内的元素居中显示。在img标签中，display属性设置为block，这样才能使图片占据整个父容器的宽度，margin属性设置为0 auto，则可以让图片在父容器中水平居中对齐。

除了以上CSS代码，我们还可以使用flex布局来让图片居中显示。

p {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 50%;
  height: auto;
}

这段代码中，我们先将p标签的display属性设置为flex，然后分别用justify-content和align-items属性设置水平和垂直方向上的居中对齐。在img标签中，我们设置了图片的宽度和高度，使它可以缩放到父容器的一半。

通过以上的CSS样式代码，我们可以轻松地实现图片的居中对齐，从而提高网页的可读性和美观程度。希望这篇文章对你有所帮助！