Centering an inline form

[devrap]

Hi there. I found some older posts on this, but nothing definitive working with current markdown.

I’m trying to center an inline form in a GF widget (the fields are left-aligned but as a block, it’s centered beneath the widget title). This CSS doesn’t do anything:

#footer-widgets .gform_wrapper_4 .gform_body {
width: 50%;
margin: 0 auto;
}

See footer of the temporary staging site: https://www.staging3.maplestaror.org/

Ideally, I’d like to center the submit button, which I can individually target, but I don’t want the fields to center-align; just the wrapper.

Thanks for any tips.

[chrishajer (Chris (Gravity Forms))]

Try this CSS to move the button to the center under the stacked inputs:

body .gform_wrapper .gform_footer {
  width: calc(50% - 8px);
  display: flex;
  justify-content: center;
}

Screenshot: Screenshot on 2023-11-09 at 12-16-54.png - Droplr

[devrap]

Ooh, that does work to center the button. Thanks, Chris!

However, the form wrapper itself is still left-aligned, instead of being able to center the (inline) form beneath the centered widget title.

Any idea how I can force that to align to the center of the widget area? The code below does not do this:

#footer-widgets .gform_wrapper_4 .gform_body {
width: 50%;
margin: 0 auto;
}

Much appreciated.