写一个父div里面是有两个div并排然后这两个div分别有一张图片和一个文本居中用css美化

HTML代码：

<div class="parent">
  <div class="child">
    <img src="image1.jpg" alt="Image 1">
    <p>Text 1</p>
  </div>
  <div class="child">
    <img src="image2.jpg" alt="Image 2">
    <p>Text 2</p>
  </div>
</div>

CSS代码：

.parent {
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px;
}

img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

p {
  text-align: center;
  font-size: 20px;
  color: #333;
  margin-top: 10px;
}

解释：

• 父元素设置display: flex;和justify-content: center;使其水平居中。
• 子元素设置display: flex;和flex-direction: column;使图片和文本垂直排列，再设置align-items: center;使其垂直居中。
• 图片设置width: 100%;和height: auto;使其宽度自适应父元素宽度，并保持高宽比例不变。设置border-radius: 50%;使其变为圆形。
• 文本设置text-align: center;使其水平居中，设置font-size: 20px;和color: #333;修改字体大小和颜色，设置margin-top: 10px;使其与图片有一定间距。