如何在不影响对齐方式的情况下将图像和文本放在同一个div中

<div class="container">
  <div class="image">
    <img src="image.jpg" alt="Image">
  </div>
  <div class="text">
    <p>Text content</p>
  </div>
</div>

.container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.image {
  flex: 1; /* 图像占据1份空间 */
}

.text {
  flex: 2; /* 文本占据2份空间 */
}

<div class="container">
  <div class="image">
    <img src="image.jpg" alt="Image">
  </div>
  <div class="text">
    <p>Text content</p>
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 列宽比例为1:2 */
  align-items: center; /* 垂直居中对齐 */
}

.image {
  grid-column: 1; /* 图像位于第一列 */
}

.text {
  grid-column: 2; /* 文本位于第二列 */
}