Single Column Centering

Single Column Centering

Center a single column on desktop with CSS only

Tired of having to add extra, empty columns to your email's markup code just so you can center a column?

With this, it's as easy as it should be: just add the appropriate padding on the column and you're done.
It applies only to desktop: for mobile, the column respects the mobile widths so you can use mobile width and offset classes.

The way it's done is that, depending on the column's width, you apply left and right padding on the column (equal amounts on both sides, or not), so that your column's width + its padding add up to 700px, which is the row's width.

Example: Single Column Centering on Desktop


Centered for Desktop

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Theme Mountain

Current Version