如何防止带有多余底部文字的图像在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>

浏览器未折叠时的原始视图

浏览器折叠后的图像

如您所见，某些文本在下面而不是向下推图像。我也不想使用：

float:left

因为使用浮动控件时似乎无法将图像移到中心。因此，将给予适当的答复。谢谢您。

Answer 1

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