图片和多行文字第一行居中对齐css

在CSS中，要实现图片和多行文字的第一行居中对齐，你可以结合`display: flex`布局和一些基本的定位技术来完成。以下是一个简单的示例：

.container {
  display: flex;
  justify-content: center; /* 居中图片 */
  align-items: flex-start; /* 文字保持默认顶部对齐 */
}

.image-container {
  position: relative; /* 给图片容器设置定位 */
}

.image {
  width: 100%; /* 图片自适应宽度 */
  height: auto; /* 保持原始比例 */
  margin-bottom: 10px; /* 如果需要，可以添加一点间距 */
  display: block; /* 确保图片能水平居中 */
  object-fit: cover; /* 图片缩放填充容器 */
}

.text-container {
  text-align: center; /* 文本内容居中 */
}

HTML结构可以像这样：

<div class="container">
  <div class="image-container">
    <img src="your-image-url" alt="Image description" class="image">
  </div>
  <div class="text-container">
    <p>这是文本的第一行，如果有多行会自动换行并保持第一行居中。</p>
  </div>
</div>