Trying to align cell values vertically in the middle of a table using CSS has been a challenge. I've tried various vertical-align options, but nothing seems to work. Here's the CSS code I'm currently using:
div.cell {
float: right;
border-left: 1px #293F6F solid;
border-bottom: 1px #293F6F solid;
height: 55px;
width: 27%;
text-align: center;
display: table-cell;
vertical-align: middle;
}
This is how my HTML looks like:
<div class="cell">XYZ</div>
Despite trying different vertical-align settings such as "text-bottom," "bottom," and "top," I still haven't managed to get it to work. Any suggestions would be greatly appreciated. Thank you.