How to center the submit button in Divi

/*submit button center*/
.et_contact_bottom_container{
display: flex;
align-items: center;
justify-content: center;
width: 100% !important;
}
/*submit button center end*/

17 Comments

Mikhail on November 15, 2018 at 10:49 am

It Works! Thank You Very Much.

George Nicolaou on November 16, 2018 at 11:40 am
Glad it helped
Reply

orange county web design on November 26, 2018 at 8:53 am

Thanks for posting this solution. We are stuck with a button on the left. Using your code we have aligned it in the middle. One last thing, we want to increase the button width so that it takes the full space as the contact form. Tried several css codes. Not working. Can you help please?

George Nicolaou on November 27, 2018 at 11:17 am
Of course, I can help. Could you give me a specific page to look at? Also, it actually depends on how you did the design. If you want you can give me back-end access and I can do it for you
Reply
George Nicolaou on November 27, 2018 at 11:25 am
It is usually something like
.et_pb_contact_form_container.et_pb_contact_form_container .et_contact_bottom_container .et_pb_contact_submit.et_pb_button {
Width: 97%;
}
Reply

Adam on February 23, 2019 at 12:06 am

Very helpful! Worked Like a charm. Do you have another article explaining how to move the button lower?

George Nicolaou on February 23, 2019 at 10:55 pm
Send me a link to help out but I think you need to add something like margin-top:30px; to your CSS. Play around with the number to get the results you want
Reply

Jen on April 2, 2019 at 8:02 pm

Worked beautifully! Thank you!

George Nicolaou on May 5, 2019 at 1:17 pm
glad to hear that
Reply
- mejie on September 17, 2019 at 1:24 pm
  On divi form, I can’t align the button in the middle using this code.
  It seems that it is stuck on the left side when I used
  Please take a look at the site
  klassquared.com/contact
  Thanks
  Reply
  - George Nicolaou on September 17, 2019 at 7:49 pm
    Try this
    .et_contact_bottom_container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    }
    Reply
mejie on September 17, 2019 at 1:19 pm
n divi form, I can’t align in the middle using this code.
#et_pb_contact_form_0 .et_contact_bottom_container {
float: none!important;
text-align: center!important;
}
It stuck on the left side when I used that code ..
Please take a look at the site
klassquared.com/contact
Reply