css - 如何防止带有额外底部文本的图像在 flexbox 缩略图中向上移动

Question

图像的底部文本将图像在缩略图列表中向上移动。

我看到一些关于 Mozilla firefox 向上移动图像的链接，给出的解决方案是使用

vertical-align: top;

或

vertical-align: bottom;

问题已经解决了一半，因为文本超出其正常高度延伸到其下方的另一个图像，而不是将图像向下推以保持一般形式。

这是我的 CSS 代码

  .flex-cover{
   width:100%; 
   display:flex; 
   justify-content: center;
  }
  .flex-child{
    text-align: center;
  }
  .flex-head{
     font-size: 20px;
     margin-top: 10px; 
     color: #ce7842; 
     text-shadow: #aaa 0 0 1px; 
     font-weight: bold;
     padding:10px;
     text-align: center;
  }

  .flex-body{
     color:#969c84;
  }

  .flex-box{
     display: inline-block;
     width:140px;
     height:140px; 
     margin:10px; 
     vertical-align: top;
     text-align: center;
  }

  .flex-pics{
    height:120px;
    width:100%;
  }

  .flex-box .flex-pics{
    background-size: 100% 100%;
  }

这是html代码

<div class="flex-cover">

    <div class="flex-child">

      <div class="flex-head"> Recent Articles</div>

      <div class="flex-body">
        <div class="mycover flex-box">
        <div class="pull-left flex-pics" style="background-image: url(&quot;/images/im/imm20.jpg&quot;);"></div><br>       
         My Article 1
        </div> 

        <div class="mycover flex-box">
        <div class="pull-left flex-pics" style="background-image: url(&quot;/images/im/imm20.jpg&quot;);"></div><br>       
         My Article 2 with some more content added to it
        </div>

        <div class="mycover flex-box">
        <div class="pull-left flex-pics" style="background-image: url(&quot;/images/im/imm20.jpg&quot;);"></div><br>       
          My Article 2
        </div>

        <div class="mycover flex-box">
        <div class="pull-left flex-pics" style="background-image: url(&quot;/images/im/imm20.jpg&quot;);"></div><br>       
          My Article 4
        </div>
      </div>

    </div>

  </div>

浏览器未折叠时的原始 View

浏览器折叠后的图片

正如您所看到的，一些文本正在下降而不是将图像向下推。我也不想使用:

float :左

因为使用 float 时似乎无法将图像移动到中心。所以，一个好的答案将得到适当的奖励。感谢期待。

Answer 1

对于 .flex-box，您可以删除 height: 140px;。这就是它发生的原因。