Text alignment inside a div?

Question

I've got this problem: I've made the bars in my code but I want the text to be in the vertical middle of the div. I've tried everything I know. What would you do?
https://code.sololearn.com/WO5aTBbzAA68/?ref=app

Answer 1

.hover {
margin-left: 20px;
width: 50px;
height: 50px;
background: #32CD32;
transition: width 3s;
text-align: center;
vertical-align:middle;
line-height:50px;
word-wrap: break-word;
-webkit-transition: width 3s;
}
.hover:hover {
width: 150px;
}

#h1 {
font-size: 20px;
color: #787877;
}

.hover2 {
margin-left: 20px;
width: 50px;
height: 50px;
background: #32CD32;
transition: width 3s;
text-align: center;
vertical-align:middle;
line-height:50px;
word-wrap: break-word;
-webkit-transition: width 3s;
}
.hover2:hover {
width: 150px;
}

#h2 {
font-size: 20px;
color: #787877;
}

.hover3 {
margin-left: 20px;
width: 50px;
height: 50px;
background: #32CD32;
transition: width 3s;
text-align: center;
vertical-align:middle;
line-height:50px;
word-wrap: break-word;
-webkit-transition: width 3s;
}
.hover3:hover {
width: 150px;
}

#h3 {
font-size: 20px;
color: #787877;
}

Answer 2

Thanks so much everyone :D

Answer 3

"vertical-align:center;" is useless and can be deleted, as vertical alignement is done by setting "line-height" with same value than "height" ( let this unset also will keep the default 'auto' value for adapt height to the content, so to the 'line-height' size ^^ ) and 'vertical-align' only working in <td> element ( or "display:table-cell;" wich require at least a "display:table" parent to be effective ).

Another solution for vertical alignement, is to use the 'FlexBox' model:
https://code.sololearn.com/W8RqtEN6Tv8q/?ref=app

Answer 4

I Have A Lot Of SoloLearning To Do :P

Answer 5

try to add
display: table-cell;
vertical-align: middle;
in all css div parts (.hover, .hover2...)