Bootstrap响应式多行文本覆盖

我想添加一个文本覆盖到我的图像，但我努力使它响应，并垂直居中。Bootstrap响应式多行文本覆盖

.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; 
}

我能够将文本水平居中，但我不能让它垂直...我真的不知道该怎么做。我所检查的只是无响应，或者它只是覆盖中心的一个徽标...

谢谢！

来源

2016-07-26 user6050469

您可以使用flexbox。相关主题：http://stackoverflow.com/questions/25311541/how-to-vertically-align-text-inside-a-flexbox –

我从来没有听说过，但我设法让它工作感谢您的链接！ – user6050469

感谢恩里克巴塞罗斯，我已经能够解决这个问题。这里是提供解决方案的小提琴：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; 

}

来源

2016-07-26 20:53:21 user6050469

很高兴听到它的工作。从现在起2天后，您将能够将自己的答案标记为已接受。不要忘记这样做！ –

如何设置的.project叠加这样

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

有了这个，你可以尝试设置一个包装div来设置背景颜色，任何颜色是你想要

来源

2016-07-26 20:25:20 Juan

谢谢，但这只适用于定义的行数，并且它不会很好地适应变化的屏幕 – user6050469

Bootstrap响应式多行文本覆盖

回答

相关问题