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

我有一组图像：图像，小标题文本以及鼠标悬停，它显示扩展的描述。如何在图像上垂直对齐文本

每个瓷砖将随机生成，所以我不知道它会是什么样的高度/宽度。

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

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

附：我用粉底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; 
}

来源

2015-11-06 user1327

使用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

来源

2015-11-06 19:10:14

补充一点：

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

Demo

来源

2015-11-06 19:16:35

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

这种方式比flex布局更受支持。

来源

2015-11-06 19:44:47

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

回答

相关问题