Vertical Center

1. Vertically center the content inside a wrapper (vcenter)

Add this class to a full-width (not divided) module or group vcenter-inner

Act2 Three Column Equal Height Without Vcenter Sample

Act2 Template Builder Vcenter Edit CSS

Act2 Template Builder Vcenter CSS Class

Then in the same window add the following code to the Custom Wrapping HTML box:

<div class="vcenter-outer">
    {{ html }}

Act2 Template Builder Vcenter HTML Wrapper

Act2 Three Equal Height Column with Vcenter Sample

Important Notes:

This doesn't work with divided modules or groups, because it will mess up with the grid system in HubSpot. If by design your module or group where you want to vertically center the content is not full-width (that row has already been splitted) you can group each column in individual groups. That will make your modules inside full-width (not divided) so you can apply the vcenter class and wrapper.

(FYI, we needed this elaborate method in order to support IE11, which doesn't play very well with CSS flexbox)

2. Vertically center the columns in a row (vmiddle)

Add this class vmiddle to a group if you want to perfectly center its direct columns in a row.

Act2 Not Vmiddle Sample

Act2 Template Builder Vmiddle Edit CSS

Act2 Template Builder Vmiddle CSS Class

Act2 Template Builder Vmiddle Sample

Using Act2.1 with the new Design Tools? Read this documentation.
Please read this before you buy! Close this alert