Bootstrap Responsive Multiline text overlay

Question

I am trying to add a text overlay to my images, but I am struggling making it responsive, and vertically centered.

Here is where I got : http://jsfiddle.net/r8rFc/910/

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

I am able to center the text horizontally, but I cannot make it vertically... I really have no clue how to do that. All I checked was either non responsive, or it was just a logo at the center of the overlay...

Thanks !

You can use flexbox for that. Related topic: http://stackoverflow.com/questions/25311541/how-to-vertically-align-text-inside-a-flexbox — Henrique Barcelos, Jul 26 '16 at 20:07
I never heard of that but I managed to make it work thanks for your link ! — user6050469, Jul 26 '16 at 20:52

score 1 · Accepted Answer · answered Jul 26 '16 at 20:53

1

Thanks to Henrique Barcelos, I have been able to solve the issue. Here is the fiddle giving the solution : 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;

}

answered Jul 26 '16 at 20:53

user6050469

177
11

Glad to hear it worked. 2 days from now you will be able to mark your own answer as accepted. Don't forget doing that! – Henrique Barcelos Jul 26 '16 at 21:29

score 0 · Answer 2 · answered Jul 26 '16 at 20:25

0

How about setting .project-overlay as such

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

With this you can try setting a wrapper div to set the background color to whatever color it is that you want

answered Jul 26 '16 at 20:25

Juan

78
5

Thanks, but this only works for a define number of lines, and it won't adapt well with a changing screen – user6050469 Jul 26 '16 at 20:39

Bootstrap Responsive Multiline text overlay

2 Answers2