I am currently working on creating a single-row CSS table with multiple cells, aiming to vertically center text within each cell. The desired table layout is as follows:
<table width="100%" height="54" border="0" bgcolor="red">
<tr>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
</tr>
</table>
To maintain semantic correctness, I prefer using div elements in place of tables for this design.
<div class="job_wrapper">
<div class="info">
<div>01</div>
<div>Campaign 001</div>
<div>DEMO Client</div>
<div>128</div>
<div>449</div>
</div>
</div>
The challenge arises when trying to attain vertical centering in IE while utilizing the display: table-cell property, as it requires using float which overrides the display property to block, disrupting vertical alignment within the cell.
Is there a workaround that can maintain the display: table-cell property in IE without compromising the ability to vertically center text?
Cheers