Center the submit button

Get Help
,
1

Depending on the content type the forms have to look different, I have successfully managed to make all the necessary style changes except for one, I can’t get the submit button to center at the bottom

the custom class name is blogform

the following is my latest attempt at getting the button to center

body .gform_wrapper .blogform .gform_footer input[type=submit] {
** position: relative !important;**
** margin: auto !important;**
}

I have tried absolute position, I have also tried to specify a left margin, and many other variations, but the button won’t move, I’m pretty sure the problem is with body .gform_wrapper .blogform .gform_footer input[type=submit] but it has been many years since I had to do any kind of css

any ideas on how I can get the button to go where it should be?

2

Can you are a link to the page on your site where we can see your form? Thank you.

3

I think your Selector/ID may not be correct. Which is why your code isn’t working. I also hope you are not adding ** ** around your CSS rule.

Your Selector/ID should look more like this.

input#gform_submit_button_01.gform_button.button {
position: relative !important;
margin: auto !important;
}

OR

input#gform_submit_button_01.gform_button.button {
position: relative !important;
margin-left: 45% !important;
}

OR

input#gform_submit_button_01.gform_button.button {
position: relative !important;
left: 45% !important;
}

It’s important to note the 01 I referenced above should be replaced with your form ID.

Also, if the percentages are still not working, someone at some point may have styled another button or even that one by using padding. In which case you may need to change the older CSS it to %.

As you see above I changed Rules from margin-left to left, this can also effect how you need to write your CSS. The CSS stylesheet remembers what you used before to style a particular element. It then often adopts that reference for all future CSS rules when referencing the same element.

If none of this works, then you may have what we call a plugin conflict. Or of course my submit buttons use different Selectors/ID’s than yours in which case you will need to figure that out lol.

Of course if you share your url with Chris he would probably take a closer look. I’d imagine he knows what to write off the top of his head. But maybe something else could be going on.

Hope this helps!

4

Hi, thanks for the reply

the ** were placed by the forum editor, I was trying to make those lines bold :frowning:

unfortunately using a form ID won’t really work here, there are several different forms that need to be styled this way, the form which is shown depends on the content category

the form can be seen on the test site here

even if the button could be made to line up with the form fields that would be preferred to the way its currently displaying

I haven’t tried using left as opposed to margin-left, so it could be worth a try, hopefully this can be sorted out without having to use some js trickery

thanks

5

aha, good news!!!

this does work to reposition the button, just need to play with the number a bit

left: 45% !important;

thanks!!!

1 Like
6

Hey - thought I’d take a look but I live in Ukraine and your site’s blocking me…

7

Lol. Good job! Glad it worked!

8

Say your buttons width is set to be 50% then you would want your margin to be 25% –

left: 25% !important;

That way you will have 25% margin on both the left and the right side of the button, this would be perfectly center.

Of course you will figure that out. The buttons width maybe set to stay within the form width itself, so if that’s the case, you will just need to know how much margin your form has to adjust the position correctly.

If you want to just not worry about positioning the submit button you may want to look into your CSS stylesheet, find where the button has been styled before, then remove the position or margin rules. At this point you should be able to just set a width for the button and it will auto adjust to the size of the form.

Hope this helps!