Question

使用响应式图像在图像叠加上获得所需效果时遇到一些问题。我想要的是将鼠标悬停在图像上，颜色块和文本如图所示，但文本位于div的垂直中心。我尝试过垂直 - 中间但它似乎没有工作。无法将宽度和高度设置值设置为需要折叠和展开。如果有人可以帮助我，我会很感激。谢谢

代码，CSS下面

.overlay-box {
   position: relative;
}
.overlay {
  display: none;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(38,150,198,0.5);
}
.overlay p {
   color: #ffffff;
   text-align: center;
}
.overlay-box:hover .overlay {
     display: block;
}

<div class="row">
  <div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">

      <div class="overlay-box">
            <a href="#" target="_blank">
              
                   <div class="overlay">
                   
                          <p>1st line<br>2nd line<br><br>
                          3rd line</p>
                   </div>
                <img src="http://placehold.it/2000x2000" class="img-responsive "/></a>


      </div>

  </div>

  </div>

Answer 1

<div class="row">
  <div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">

  <div class="overlay-box">
        <a href="#" target="_blank">
          
               <div class="overlay">
               
                      <p>1st line<br>2nd line<br><br>
                      3rd line</p>
               </div>
            <img src="http://placehold.it/2000x2000" class="img-responsive "/></a>


  </div>

  </div>

  </div>

{{1}}

Answer 2

你需要用另一个div包装叠加层（因为table似乎忽略了height和width当他们absolute时）并添加{ {1}}。然后为子div添加position:absolute和dislpay:table。

看看这个小提琴：https://jsfiddle.net/65cvzcev/

垂直对齐图像叠加中的文本

2 个答案: