如何在html中并排对齐图片和标签？

<style>
  .container {
    overflow: auto; /* 清除浮动 */
  }

  .container img {
    float: left;
    margin-right: 10px; /* 可根据实际情况调整间距 */
  }
</style>

<div class="container">
  <img src="image.jpg" alt="图片">
  <span>标签</span>
</div>

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

  .container img {
    margin-right: 10px; /* 可根据实际情况调整间距 */
  }
</style>

<div class="container">
  <img src="image.jpg" alt="图片">
  <span>标签</span>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center; /* 垂直居中对齐 */
    column-gap: 10px; /* 可根据实际情况调整间距 */
  }
</style>

<div class="container">
  <img src="image.jpg" alt="图片">
  <span>标签</span>
</div>