I'm trying to flip some tiles of text, but the tiles should all be vertically centered. Prior to flip, the tiles were all arranged as <td>. When I apply flip, I notice 2 issues as seen in the fiddle and summarized below: https://jsfiddle.net/3c1f9vcb/2/
2 issues:
1) Flip seems to destroy the vertical-align:middle that's naturally a benefit from using <td>. Is there a way to get this back WITHOUT manually knowing the height of the content and doing something like equal margins or padding on child/parent? Just because I have varying content, and the whole point of using <td> to align is that I don't have to know all the heights. But alas, if this is the only way of doing it, so be it, I can at least solve this myself
2) The second issue I don't know how to solve at all, which is that when I add the flip it adds a huge space before the content starts (weird padding/margin/ something??)
I'm trying to flip some tiles of text, but the tiles should all be vertically centered. Prior to flip, the tiles were all arranged as
<td>. When I apply flip, I notice 2 issues as seen in the fiddle and summarized below: https://jsfiddle.net/3c1f9vcb/2/2 issues: 1) Flip seems to destroy the
vertical-align:middlethat's naturally a benefit from using<td>. Is there a way to get this back WITHOUT manually knowing the height of the content and doing something like equal margins or padding on child/parent? Just because I have varying content, and the whole point of using<td>to align is that I don't have to know all the heights. But alas, if this is the only way of doing it, so be it, I can at least solve this myself 2) The second issue I don't know how to solve at all, which is that when I add theflipit adds a huge space before the content starts (weird padding/margin/ something??)Insights greatly appreciated!