Question

我正在尝试为我的图片添加文字叠加层，但我正在努力使其响应，并垂直居中。

.img-overlay {
    position: relative;
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;

}

.centered-text
{
  display:table;
  height:100%;
  width:100%;
  text-align:center;
  vertical-align:center;
}

我能够将文本水平居中，但我不能垂直居中......我真的不知道如何做到这一点。我检查的只是无响应，或者只是叠加中心的标志......

谢谢！

Answer 1

感谢Henrique Barcelos，我能够解决这个问题。这是提供解决方案的小提琴：http://jsfiddle.net/r8rFc/912/

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;
    display:flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;

}

Answer 2

如何设置 .project-overlay如此

.project-overlay {
    position: absolute; 
   top: 45%; 
   left: 0;
   text-align: center; 
   width: 100%; 
    background-color: rgba(41,128,185,0.9);
    color: #fff; 
}

使用此功能，您可以尝试设置包装器div，将背景颜色设置为您想要的颜色

Bootstrap响应式多行文字叠加

2 个答案: