Question

我有一组图块：图片，上面有小字幕文字，鼠标悬停时会显示扩展说明。

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

我的问题是：我想要一个垂直对齐的扩展描述文本，但我无法弄清楚如何实现它。任何帮助表示赞赏！

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

P.S。我使用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

Answer 2

添加：

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

Demo

Answer 3

我会将display:table-cell和vertical-align: middle用于item-desc。

这比flex布局更受支持。

如何在图像上垂直对齐文字

3 个答案: