How to vertically & horizontally align content?

In this article, we explain to you how you can use padding/margins to vertically center content, and to use tables and table cells for more exact vertical centering. We will also explain various ways content can be horizontally centered aligned.

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.

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!

Horizontal alignment

Horizontal alignment can be achieved in various ways through the micro-themes, layout, text editor, float and custom CSS.

Alignment micro-themes – The alignment micro-themes allows content within an interactive component to be aligned left, right, or centered. Interactive components such as rows, columns, containers, flow steps, forms, reveals, and etc. can be aligned using the alignment micro-themes. The alignment micro-themes can also be added to tables, on the table or table-cell container to align all items within the table horizontally left, right or centered.

Image alignment – Images can be aligned centered by selecting the image, navigating to the micro-theme, selecting others, then images where the alignment options will then appear.

Inline-block – Content can be aligned centered using the layout panel, and setting the display to inline-block. Unlike the alignment micro-themes, components that fall within the interactive component will not display inline-block unless selected individually. If two components such as two text components are set to display inline-block, they will appear aligned text to each other centered to its respective parent component if the text components are shorter than the width of the column. Otherwise, the text components will display in two separate line.

Float – Content can be aligned left or right by using float in the layout panel. Float must be applied to each component individually unlike the alignment micro-theme, which can be applied to the outer most parent component resulting in all components within it to display according to the alignment selected. It is recommended to attempt to apply other alignment tools prior to using float. Float will force the component left or right but can only be adjusted in other viewports using custom CSS. Other horizontal alignment abilities allow for alternative alignments in smaller viewports using the micro-themes.

Custom CSS – Custom CSS can be applied at the page or creative level. A target or CSS class should applied. Text components use text-align, images and containers components use display. It is recommended to use the alignment micro-theme or text editor alignment, prior to using custom CSS.

.result-text {

text-align: center;

}