ion hacks 206: Vertical Centering

Follow

Dave Kavalsky

January 23, 2018 19:29

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.

In scenarios where you want to accomplish exact vertical centering,  we can leverage centering tables. Our Slide-In Form Right Quick Start, under the Landing Page category, leverages a centering table that we use for reference.

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!

 

 

 

 

 

 

0

• 

  Al Lemieux December 06, 2018 22:16

  Sorry, this isn't working for me. Could you provide step-by-step instructions below the video? Thanks.

  0

  Comment actions Permalink
• 

  Max Weissler December 10, 2018 16:06

  Hi Al, thanks for note! We update the support post to include some written step-by-step instructions for creating a centering table in ion. Let us know any questions!

  0

  Comment actions Permalink

Please sign in to leave a comment.