Column verticle center of a row?

User 2706435 Photo


Ambassador
444 posts

How can I place a column, so that is it is always vertically centered within a row?
User 379556 Photo


Registered User
1,583 posts

I assume the row height is set as a percentage of the page height, rather than as a fixed pixel height. Otherwise a suitable top margin on the column would presumably do the trick.

If both the row and the column have percentage heights, I would be inclined to the low-tech solution as follows -
If the height of the column in question were 30%, then I would place above it a column with a height of 35% (i.e. [100%-30%]/2).

If I wanted is a column with a fixed height and the row as a percentage of the page height, I would change the problem as follows -
1. I would use a container to be vertically centred in the column, rather than the column to be vertically centred in the row.
2. I would therefore set the column height to 100% of the row height, and follow Mansour's fine tutorial.

Frank
User 2706435 Photo


Ambassador
444 posts

Thanks.

Is there a work around for Firefox? Following that tutorial, only Firefox will not display a min height box of 550px, IE and Chrome will.
User 379556 Photo


Registered User
1,583 posts

In the Design panel for the row element, unticking Height Auto did the trick for me the first time I tried it, but curiously doesn't seem consistently to work. If I find something that does the trick consistently I'll post it here.

Frank
User 379556 Photo


Registered User
1,583 posts

There is a simpler method altogether, and it works for Firefox as well.

Using the container in the column as in the tutorial mentioned, one can simply set the column to display as Flex with the Direction:Column and the Justify:Center.

Frank

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.