After spending four frustrating hours attempting to vertically align text without resorting to tables, I had to throw in the towel.
I followed advice from a recommended solution on Stack Overflow, but my responsive layout requirements and complex CSS structure posed challenges that left me unable to make it work smoothly.
In the end, I had to give in and use a table to avoid wasting any more time. But it got me thinking - is there still a strong case against using tables for layout in certain situations, or has the landscape changed with modern design complexities?
EDIT:
CAN YOU SPOT THE HACK IN THIS CODE?
The method suggested in the link was labeled as a hack, which raises some concerns about its reliability.
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
However, it's worth noting that the traditional table approach always seems to do the job well.
<table>
<tr>
<td>
Text
Which option do you think looks cleaner? Trust your judgment!