Ezhno Ezhno - 12 days ago 7
CSS Question

Vertical Align text in a fluid div

I wonder how to align verticaly my text in a div.

I've tried things like

display: inline block;
but it didn't help.
My container is actually 10% height of the whole window.

Please see my code below, the refering div is "droite".

https://jsfiddle.net/5zh9qgnw/

.droite{
width: 73%;
height: 100%;
float:right;
background-color: #232200;
text-align: center;
color: white;
}

.gauche{
width: 27%;
text-align: center;
float: left;
background-color: #afafaf;
}

#aszone, #gzone{
margin-left: 20px;
margin-right: 20px;
height: 10%;
text-align:center;
background-color: black;
background-size: cover;
}

Answer

set parent(gzone) display:table; and child(.gauche,.droite ) display:table-cell;

 .gzone{ display:table; }  
 .gauche,.droite { display:table-cell; vertical-align:middle; }
Comments