I was trying to apply the CSS property vertical-align: middle on an element but no luck, it was not working as expected.
Here is an example of non-functioning code :
.container {
background-color: red;
height: 50px;
width: 100px;
}
.text {
vertical-align: middle;
}The first option would be to set a line-height on the element you want to center vertically :
.container {
background-color: red;
height: 50px;
width: 100px;
}
.text {
vertical-align: middle;
line-height: 50px;
}The second option would be to use display table on the parent .container, and display table-cell on the element you want to center vertically :
.container {
background-color: pink;
height: 50px;
width: 100px;
display: table;
}
.text {
vertical-align: middle;
display: table-cell;
}Hope I could help.
