[Pro] Vertical centring via CSS - neat solution

I spotted this recently - see the link - and as far as Freeway goes, this is how you do the vertical bit - the page content depth needs to be a known value, give or take, one of the drawbacks alas.

  1. Draw an outer html container on the page, and extend it as far downward as necessary to hold all the content, and extend to the full page width.

  2. A secondary inner container can be positioned in this outer one as an inline item - or you can place an entire inline page section that you have already completed in here.

  3. For the outer container, do 'Item > Extended > div style > top: 50%
    height: 1px

In the example, ‘top’ goes in the ‘Name’ field, 50% in the ‘Value’ field, and so on.

If you have placed your outer container as an inline item by double clicking and inserting an html item on an empty page, you’ll need to also put position: absolute.

For the inner container that carries your content, do the following:

top: -(height of inner container)/2

Substituting half the height of the inner container for the expression (height of inner container)/2. This is entered as a negative value.

The outer container is told to place 50% of the screen depth above it. Being only 1pixel in depth, it doesn’t interfere with anything, but as Freeway allows hidden content to show by default… anything placed within it will show. On the Freeway pasteboard you can actually make the outer container as deep as you like for visual purposes, it will get ignored on publishing.

The inner container after being pushed half way down the page, then goes back up by half it’s depth, effectively centring it.

For content which has a variable or unknown depth… well I probably wouldn’t use it, although experimentation with figures below 50% may work better.

freewaytalk mailing list
Update your subscriptions at: