如何使用 flexbox 将文本与图像水平对齐？答案

【问题标题】：How to horizontally align text with images using flexbox?如何使用 flexbox 将文本与图像水平对齐？
【发布时间】：2019-04-19 07:29:06
【问题描述】：

我正在尝试将文本与文本两侧的三个垂直对齐的图像水平对齐。但是，当我应用“display:flex;”时到三个的父元素，它将三个 div 的对齐方式从垂直更改为水平，更改图像的大小并在第一个 div 和文本之间产生空白，而不是将所有 div 推到左侧屏幕。

.text {
  font-family: 'font', cursive; 
  font-size: 18px;
  text-align: left;
  width: 35em;
}

.image > img {
 width: 20%
}

.image {
 display: flex;
 flex-direction: column;
} 

.flex {
 display: flex;
}

<div class="flex">
  <div class='image'>
   <img src='image.jpg'>
   <img src='image.jpg'>
   <img src='image.jpg'>
  </div> 

  <div class='text'>
   <p>text
   <br><br>text 
   <br><br>text
   <br><br>text</p>
  </div>     

  <div class='image'>
   <img src='image.jpg'>
   <img src='image.jpg'>
   <img src='image.jpg'>
  </div>  
</div>

【问题讨论】：

标签： html css

【解决方案1】：

将您的 flex 设置为您的 div，并从图像中删除显示和 flex-direction

.text {
  font-family: 'font', cursive; 
  font-size: 18px;
  text-align: left;
  flex:0 0 10%;

}

 img {
 width: 100%;
}

.image {
 

 flex: 0 0 10%;
} 

.flex {
 display: flex;
}

<div class="flex">
  <div class='image'>
   <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
   <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
   <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
  </div> 

  <div class='text'>
   <p>text
   <br><br>text 
   <br><br>text
   <br><br>text</p>
  </div>     

  <div class='image'>
   <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
   <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
   <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
  </div>  
</div>

【讨论】：

非常感谢，提供了很多帮助，并按照我的意愿工作。
@tocky 很高兴这对你有帮助，如果你能接受答案，请告诉我

【解决方案2】：

.text {
  font-family: 'font', cursive; 
  font-size: 18px;
  text-align: left;
  flex: 1;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-items: center;
}

.image > img {
 width: 20%;
 display: block;
 margin: 0 auto;
}

.image {
 display: flex;
 flex-flow: column nowrap;
} 

.flex {
 display: flex;
 flex-flow: row nowrap;
 justify-content: space-evenly;
 align-items: center;
}

<div class="flex">
  <div class='image'>
   <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
   <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
   <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
  </div> 

  <div class='text'>
   <p>text
   <br><br>text 
   <br><br>text
   <br><br>text</p>
  </div>     

  <div class='image'>
   <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
   <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
   <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
  </div>  
</div>

这样好吗？

【讨论】：

谢谢，我试过这段代码，但第一个和第二个弹性项目之间仍然有空白，第二个和最后一个弹性项目之间没有空白。我在想它可能与上面的代码有关。
@toky 再次编辑。这样更好吗？
是的，非常感谢。不再是不需要的空白区域，可以按照我的意愿工作。