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響應式多行文本覆蓋

回答

相關問題