Create a relatively centering object

It is easy to automatically center an object by setting the horizontal scale in the Scene Inspector and tweaking the Flexible Layout settings. But what if you want to have the relative position to vary depending on the width of the browser window? For example, say that you want an object to be centered when the browser window is narrow but slightly to the right of center when the window is wide. Or say that you want an object to shift from the center to the left when you widen the window, or perhaps if you want the object to shift only a fraction of the window width? Or what if you want to create a parallax effect?

Here’s how to do it:

Select the object, and select Group from the Arrange menu (option-command-g), then adjust the size and position of the group by playing with the Flexible Layout tools. You can drag the borders of the group so that the content is outside of the group. If you want to refine this further, group it again and then adjust the borders of the group and play with the Flexible Layout tools for this group.

Here’s a sample file. As you widen the browser window, one object stays centered, another shifts slightly to the left and a thirds shifts even more. If you make the window very narrow, the objects shift in the opposite direction. [1]

RelativePositions.zip (12.1 KB)
[1]: https://www.hightail.com/download/bXBZck82eFhOMUJqQThUQw

3 Likes

Thanks for sharing this, Trey