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

Question

在使用响应式图像对图像叠加层获得预期效果时遇到一些问题。我想要的是将鼠标悬停在图像上时，色块和文本如图所示显示，但文本位于 div 的垂直中心。我试过 vertical-middle 但它似乎没有用。无法根据需要折叠和展开设置宽度和高度的值。如果有人可以提供帮助，我将不胜感激。谢谢

代码，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 包裹覆盖层（因为 table 似乎忽略了他们的 height 和 width 当他们 absolute ) 并向其添加 position:absolute。然后为 child div 添加 dislpay:table 和 dislpay:table-cell; vertical-align:middle。

看看这个 fiddle：https://jsfiddle.net/65cvzcev/

Answer 2

img{
max-width: 100%;
height: auto;
}
.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:before {
content: '';
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
border: 1px solid;
}
.overlay p {
   color: #ffffff;
   text-align: center;
display: inline-block;
vertical-align: middle;
width: 90%;
}
.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>

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

Vertical aligning text in overlay of image

css

vertical-alignment