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

Question

我有一组图 block :图像、上面的小标题文本以及在鼠标悬停时显示扩展描述。

每个图 block 都是随机生成的，所以我不知道它的确切高度/宽度。

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

我这里有一个演示:http://codepen.io/anon/pen/mezbzL

附注我使用 Foundation 5。

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>

CSS:

.item-wrapper {
  position: relative;
  &:hover { 
    .item-caption {
      display: none;
    }
    .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;
    }
  } 
}

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

.item-desc {
  display: none;
}

Answer 1

使用 text-align: center;对于 .item-caption和 .item-desc + display: 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相反。

CODEPEN DEMO