ion hacks 206: Vertical Centering
This support post (with a video module from the ion hacks training course included below) outlines how to vertically center content within a section. We cover how you can use paddings/margins to vertically center content, and to use tables and table cells for more exact vertical centering. (Video length: 3:12)
REFERENCE MATERIAL
In most cases, by adding the appropriate amount of top and/or bottom padding, you can easily achieve a vertically-centered piece of content.
HOW TO CREATE A CENTERING TABLE IN ION
Creating a centering table in the ion platform

1. We first set a fixed height to a our column. In our example, we set the height to 570 pixels.
Adding a fixed height to the column provides a frame of reference to allow for the vertical centering to take effect. When we apply fixed heights to any element, we want to consider the amount of content we're adding in, to fit within the space. We can adjust the fixed height to correspond with the content, and we want to keep the various screen sizes in mind.

2. Add a container into your column, and change the name to Centering Table, for ease of reference. With your container added and selected, click into the layout dropdown in the EDIT tab and adjust the following settings:
- Adjust Width and Height to 100% each
- Adjust DISPLAY setting to Table

3. Add a container inside of the 'Centering Table' container, and change the name of the new container to Centering Container. Adjust the following layout settings for the new container:
- Adjust DISPLAY setting to Table-cell
- Adjust VERTICAL ALIGNMENT to Middle
4. Add content inside of your centering container!


Please sign in to leave a comment.
Comments
2 comments