[Resolved] Submit Button Alignment

[Author]

Posts

[jamesH-3]

Hi Team

I had submitted the same question before but the ticket was closed because I could not respond to you guys early enough and I do apologize for that.

I am working with an Elementor button widget and a Toolset form button. "Sign Up to get Started" button is an Elementor button and "Launch Course" button a Toolset form button. (Please refer to the attached image)

It took a while but I managed to match the styling of these two buttons; however, I am unable to horizontally center the button of the Toolset form.

I would appreciate if you can help me and direct me in the right direction? (I understand I might have to use CSS but I cannot work out which elements/selectors I should be changing)

Here is one of the posts these buttons were used:
hidden link

Thanks

[Minesh]

Hello. Thank you for contacting the Toolset support.

I checked the page but it seems I will require admin access details.

So, I just found those access details in previous ticket and when I login, I see you are using the elementor to design your single post:
=> hidden link

I tried to apply inner section so that I could add two columns and then move each button to each column but I just could not able to add the columns to your existing elementor single template.

Its more about how you can design your site using Elementor so I suggest you contact the Elementor support.

[jamesH-3]

Hi Minesh

Thanks for your email

I still would like to know how I can change to position of a toolset form button though.

I have now added the form to a page without using Elementor and the butting is still right aligned. How can I make it center aligned without having to create columns:

hidden link

You can access to this page by using the same login credentials.

Thanks
Zaf

[Minesh]

Please check now: hidden link

I've wrapped the button with div as given under:
=> hidden link

<div class="align-center">
	[cred_field field='form_submit' output='bootstrap' value='Launch Course' class='btn btn-primary btn-lg']
</div>

And then added the following CSS to the form's CSS section:

.align-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

I can see the button in center now.