How to center the submit button in Divi

Posted by George Nicolaou

On 15 Sep, 2017
George Nicolaou - Senior Web Developer
/*submit button center*/
.et_contact_bottom_container{
display: flex;
align-items: center;
justify-content: center;
width: 100% !important;
}
/*submit button center end*/

17 Comments

  1. Mikhail

    It Works! Thank You Very Much.

    Reply
    • George Nicolaou

      Glad it helped

      Reply
  2. orange county web design

    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?

    Reply
    • George Nicolaou

      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

      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
  3. Adam

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

    Reply
    • George Nicolaou

      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
  4. Jen

    Worked beautifully! Thank you!

    Reply
    • George Nicolaou

      glad to hear that

      Reply
      • mejie

        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

          Try this

          .et_contact_bottom_container{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100% !important;
          }

          Reply
    • mejie

      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
  5. Albert

    Nice tutorial. How do I know the form number? Your line added a new contact form, and changed nothing.

    Reply
  6. A.S.M. Habibur Rahman

    It’s wonderful, thanks a lot!

    Reply
    • George Nicolaou

      No problem

      Reply
  7. Maria Cecilia

    It Works! Thank You Very Much!! 😀

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This
Divi Theme Code SnippetsHow to center the submit button in Divi