如何使用flexbox将图像下的文本对齐到相同的高度？答案

【问题标题】：How to align text under image with the same height using flexbox?如何使用flexbox将图像下的文本对齐到相同的高度？
【发布时间】：2021-01-25 02:28:45
【问题描述】：

我有两个并排的图像，我想使用 flexbox 制作相同的高度，并且我想对齐图像下方的文本。有人可以帮我吗？？

这是我的代码：

 
 .row{
  display:flex;
  }
  .cell img{
      width:150px;
     }

<div class="content">
<div class="row">
<div class="cell">
  <img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-589121_1280.jpg"></div>
<p class="project1info">
Featuring allows a user to search a musical artist and view a list of collaboraters they have worked with.</p>

<div class="cell">
  <img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-1882120_1280-1.png"></div>
<p class="project1info">
Featuring allows a user to search a musical artist and view a list of collaboraters they have worked with.</p>

</div>
</div>

【问题讨论】：

请添加屏幕截图，在您的代码中图像高度相同！

标签： html css flexbox grid

【解决方案1】：

你可以不给出高度百分比，所以你得到它的像素。

你的情况你试试看：-

 .wp-block-image img{
     width:100%;
     height:320px;
     object-fit:cover;
  }

此代码将解决您的问题

【讨论】：

【解决方案2】：

使您的外部元素固定高度并保持图像高度 100%。

.wp-block-image{
  width:100%;
  height:320px;
}

【讨论】：