Column verticle center of a row?
How can I place a column, so that is it is always vertically centered within a row?
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
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
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.
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.
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
Frank
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
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.