Streaming live at 10am (PST)

Achieving vertical alignment in NON Flexbox table layout


#1

Hi I am trying to make a simple table without using Flexbox, given the endless trouble I have had trying to get it to render properly in IE 11. It seems like it shouldn’t be rocket science but I’m having all kinds of difficulties.

The issue I am having is that I am trying to get the capital A B and C letters to sit vertically in the middle of their container. Is there an elegant way, ie. NOT adding some fixed padding that doesn’t scale, etc.?

If you can, please ignore the fact that the footer flies up and covers the table in IE 11 (another example of the IE flexbox bugs), that is an issue for another time. I just want a simple way to vertical align halfway for the large letters in their row.

Thanks for any advice!

Heres the site link:
https://preview.webflow.com/preview/tabletests?preview=1a33f1e0dd7a3b4b8b9283d599c557b6

and the published page that breaks in IE 11 (Win7 default browser):
http://tabletests.webflow.io/


Here is my site Read-Only: https://preview.webflow.com/preview/tabletests?preview=1a33f1e0dd7a3b4b8b9283d599c557b6
(how to share your site Read-Only link)


#2

Hi @Marginal

There are a couple of ways to align your letters vertically.

You can give the column padding at the top and bottom or give the letters a margin at the top and bottom.

column padding

Alternatively, if you give the column a height, you can align vertically with a transform.
Give the letters a 50% top position and a -50% vertical move transform.

transform align

I hope this helps!

Ollie


#3

Great, thanks for the help, that worked.


#4

You’re welcome, I’m glad I could help!


#5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.