Question

我正在尝试使文本水平对齐，并在文本的每一侧使用三个垂直对齐的图像。但是，当我应用“ 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>

Answer 1

.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>

那好吗？

Answer 2

将flex设置为div并从图像中删除显示和flex方向

.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>

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

2 个答案: