Javascript 如何在图像上垂直对齐文本

我有一组平铺：图像，上面有小标题文本，鼠标悬停时显示扩展描述

每个瓷砖都是随机生成的，所以我不知道确切的高度/宽度

我的问题是：我想有一个垂直对齐的扩展描述文本，但我不知道如何实现它。感谢您的帮助

我这里有一个演示：

p、 美国。 我使用基金会5。< /P> HTML：

<div class="row">
  <div class="large-12 columns">
    <ul class="small-block-grid-4">
      <li class="item">
        <div class="item-wrapper">
          <img alt="" src="http://placehold.it/380x250">
          <div class="item-caption">Caption text</div>
          <div class="item-desc">
            <span class="item-desc-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aperiam</span>
          </div>
        </div>
      </li>
      <li class="item">
        <div class="item-wrapper">
          <img alt="" src="http://placehold.it/280x450">
          <div class="item-caption">Caption text</div>
          <div class="item-desc">
            <span class="item-desc-text">Long</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

---

使用

文本对齐：居中用于
.item caption
和
.item desc
+
显示：flex

新CSS：

      .item-caption {
          background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
          color: white;
          width: 100%;
          height: 25px;
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 0 7.5px;
          text-align: center
        }

        .item-desc {
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          margin: auto;
          left: 0;
          top: 0;
          background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
          color: white;
          padding: 0 7.5px;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
    }
  } 
}

如果您想将其放在顶部，请删除
bottom:0
，然后将其放在
top:0
上

添加以下内容：

.item-desc {
      display: flex;
      align-items: center;
      justify-content: center;
}

我会使用
显示：表格单元格
和
垂直对齐：中间
作为
项目描述

这比flex布局更受支持

.item-desc {
      display: flex;
      align-items: center;
      justify-content: center;
}