Centering modules within a group

[michelleGFN]

I'm creating an e-mail template in Design Tools. In the screenshot below, I want the social media images/text line to be centered with the "Invite your friends" line. The CTA button, invite line and social media line are all currently part of a single group module. Any advice on what css styling I can add to make everything align properly?

Thanks!

[Lisazing]

Hi @michelleGFN,

An email template can be very tricky to design. You could use a page center CSS at the group level.

.page-center {
float: none !important;
max-width: (enter your width here)px !important;
margin: 0 auto !important;

Here the big BUT...sometimes CSS to a group module for an email template will disappear depending on which platform the email is viewed in. 

The best way I've used is to hard code a <P> tag. 

<p style="text-align:center">

Invite your friends to discover their Footprint!<br>

<a href="(Social link)>(Social image)</a>&nbsp;<a href="(Social link)>(Social image)</a>&nbsp;<a href="(Social link)>(Social image)</a>

</p>

It's old school but your design format will hold.

[ajchapman20]

I think Michelle might have the answer for you.  In case, you are still having trouble I have a bit more info. 

From the screenshot you previously shared, it looks like the social media images/text line is slightly to the left of the "Invite your friends" line. In that case, have you tried adding left padding to the social media images/text line center it? (Padding CSS documentation here). Normally, designers also use the text-align CSS property to align text to the center as well, maybe you can also get them to try to add a "text-align:center;" code to the module group, or the individual elements, to see if it helps as well? (Text-align CSS Documentation here)

Hope this helps, let me know if you have any further questions on this!

[Sgugala]

Hello,

This response also solved my problem I was having with doing the Practicum.  I was able to quickly build it out using raw HTML/CSS but there seem to be a lot of code that is built into the CMS that makes coding function unexpectedly.  Is there a resource that lists these background boilerplates that make something like 'float: none' necissary?  Thanks,