CMS Development

Jlawal
Top Contributor

CTA Button Alignment

SOLVE

Hello,

 

My CTA button won't center vertically. It either spills off of the button onto the banner or stays at the very bottom or top of it.

 

I'm told that there is some CSS that will move it up into the center. 

 

Is anyone able to help me with this?

2 Accepted solutions
Jlawal
Solution
Top Contributor

CTA Button Alignment

SOLVE

Thank you for replying! Still getting the hang of this so i've only just seen the notification.

 

I managed to resolve it but thank you for taking the time out to get back to me 🙂

View solution in original post

areiter74
Solution
Participant

CTA Button Alignment

SOLVE

How did you resolve it? 

<edit>

Nevermind! Got it. 

Custom CSS, in-line: " margin: 0 auto; text-align: center; "

View solution in original post

7 Replies 7
ndwilliams3
Key Advisor

CTA Button Alignment

SOLVE

It's difficult to give a suggestion without seeing the page. Can you post the link to the page? 

Jlawal
Solution
Top Contributor

CTA Button Alignment

SOLVE

Thank you for replying! Still getting the hang of this so i've only just seen the notification.

 

I managed to resolve it but thank you for taking the time out to get back to me 🙂

areiter74
Solution
Participant

CTA Button Alignment

SOLVE

How did you resolve it? 

<edit>

Nevermind! Got it. 

Custom CSS, in-line: " margin: 0 auto; text-align: center; "

adrian_davies
Member

CTA Button Alignment

SOLVE

Hi

I'm having this problem on a number of CTAs. I've entered that CSS into the custom CSS field but it is till not aligning centrally. Any ideas?

 

CSS field for centre alignmentCSS field for centre alignment

0 Upvotes
eobriant
Participant

CTA Button Alignment

SOLVE

This still isn't working for me. Anyone have any ideas? 

Jlawal
Top Contributor

CTA Button Alignment

SOLVE

Try adding 'text-align: center;' to the modules css declaration in the template editor!

0 Upvotes
acollart
Participant

CTA Button Alignment

SOLVE

Not pretty, but this is what worked for us:

 

<!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<!--HubSpot Call-to-Action Code -->
<span style="border-width:0px;text-align: center;" .... 

<!-- end HubSpot Call-to-Action Code -->

</body>
</html>

0 Upvotes