css 图片文字对齐方面的问题

Question

如何在一个div里设置四行 每行一个图片 一个文字 且图片在文字左侧 均对齐

Answer 1

参考GPT和自己的思路：要实现这个效果，可以在每行创建一个包裹图片和文字的 div 容器，并将该容器设置为 display: flex; align-items: center; 实现垂直居中对齐。然后再将图片和文字分别设置为该容器的子元素，将图片设置为 float: left; 让其在文字的左侧，同时设置 margin-right: 10px; 使其与文字之间保留一定的间隔。最后给容器设置一个宽度，让其能在一行内容纳图片和文字即可。以下是一个简单的示例代码：

<div class="container">
  <div class="item">
    <img src="image1.jpg">
    <span>Text 1</span>
  </div>
  <div class="item">
    <img src="image2.jpg">
    <span>Text 2</span>
  </div>
  <div class="item">
    <img src="image3.jpg">
    <span>Text 3</span>
  </div>
  <div class="item">
    <img src="image4.jpg">
    <span>Text 4</span>
  </div>
</div>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  display: flex;
  align-items: center;
  width: 25%;
}
.item img {
  float: left;
  margin-right: 10px;
}
</style>

以上代码中，容器使用 flex 布局，并设置了 flex-wrap: wrap; 和 justify-content: space-between; 实现了多行排列，每个项目使用了 flex 布局进行垂直居中对齐，并设置了宽度为 25% 使其一行容纳四个项目。图片使用了 float 左浮动保证在文字左侧，同时 margin-right 留出一定间隔。