title: Center align a Google Recaptcha field within Contact Form 7 (WP)
body: <p>Really struggling to center align a Recaptcha within a Contact 7 form.  </p>
  
  <p>I've tried multiple solutions from Google but none have worked.</p>
  
  <p>I don't know which bit is needed, so here is the element:</p>
  
  <pre><code>&lt;div role="form" class="wpcf7" id="wpcf7-f116-p87-o1" lang="en-US" dir="ltr"&gt;
      &lt;div class="screen-reader-response"&gt;&lt;/div&gt;
      &lt;form action="/contactus/?w3tc_note=flush_all#wpcf7-f116-p87-o1" method="post" class="wpcf7-form" novalidate="novalidate"&gt;
          &lt;div style="display: none;"&gt; &lt;input type="hidden" name="_wpcf7" value="116"&gt; &lt;input type="hidden" name="_wpcf7_version" value="5.0.4"&gt; &lt;input type="hidden" name="_wpcf7_locale" value="en_US"&gt; &lt;input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f116-p87-o1"&gt; &lt;input type="hidden" name="_wpcf7_container_post" value="87"&gt; &lt;/div&gt;
          &lt;p&gt;&lt;label&gt; Your Name (required)&lt;br&gt;
                  &lt;span class="wpcf7-form-control-wrap your-name"&gt;&lt;input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"&gt;&lt;/span&gt; &lt;/label&gt;&lt;/p&gt;
          &lt;p&gt;&lt;label&gt; Your Email&lt;br&gt;
                  &lt;span class="wpcf7-form-control-wrap your-email"&gt;&lt;input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"&gt;&lt;/span&gt; &lt;/label&gt;&lt;/p&gt;
          &lt;p&gt;&lt;label&gt; Your Phone Number&lt;br&gt; &lt;span class="wpcf7-form-control-wrap tel-563"&gt;&lt;input type="tel" name="tel-563" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false"&gt;&lt;/span&gt; &lt;/label&gt;&lt;/p&gt;
          &lt;p&gt;&lt;label&gt; Subject&lt;br&gt;
                  &lt;span class="wpcf7-form-control-wrap your-subject"&gt;&lt;input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"&gt;&lt;/span&gt; &lt;/label&gt;&lt;/p&gt;
          &lt;p&gt;&lt;label&gt; Your Message&lt;br&gt;
                  &lt;span class="wpcf7-form-control-wrap your-message"&gt;&lt;textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"&gt;&lt;/textarea&gt;&lt;/span&gt; &lt;/label&gt;&lt;/p&gt;
          &lt;p&gt;&lt;label&gt; Please confirm you're a human&lt;/label&gt;&lt;/p&gt;
          &lt;div class="wpcf7-form-control-wrap"&gt;
              &lt;div data-sitekey="XXXXXXXXXXXXX" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha"&gt;
                  &lt;div style="width: 304px; height: 78px;"&gt;
                      &lt;div&gt;&lt;iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;amp;k=XXXXXXXXXXXXX-nrxCQzWkg_6m86NQ2Veyo&amp;amp;co=aHR0cDovL3ZrMWhhaXIuY28udWs6ODA.&amp;amp;hl=en&amp;amp;v=v1540189908068&amp;amp;size=normal&amp;amp;cb=39arzn19kut6" width="304" height="78" role="presentation" name="a-7up0lnyvb9r4" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
              &lt;/div&gt; &lt;noscript&gt;
                  &lt;div style="width: 302px; height: 422px;"&gt;
                      &lt;div style="width: 302px; height: 422px; position: relative;"&gt;
                          &lt;div style="width: 302px; height: 422px; position: absolute;"&gt;
                              &lt;iframe src="https://www.google.com/recaptcha/api/fallback?k=XXXXXXXXXXXXX-XXXXXXXXXXXXX" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"&gt;
                              &lt;/iframe&gt; &lt;/div&gt;
                          &lt;div style="width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;"&gt;
                              &lt;textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;"&gt;
                  &lt;/textarea&gt; &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/noscript&gt;
          &lt;/div&gt;
          &lt;p&gt; &lt;/p&gt;
          &lt;p&gt;&lt;input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"&gt;&lt;span class="ajax-loader"&gt;&lt;/span&gt;&lt;/p&gt;
          &lt;div class="wpcf7-response-output wpcf7-display-none"&gt;&lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Another user said it may be easier to see it, so I've uploaded the above code onto an html here:  <a href="http://stargazysolutions.com/users/test.htm" rel="nofollow noreferrer">http://stargazysolutions.com/users/test.htm</a></p>
  
  <p>Just wanting to get the recaptcha centered in the middle of the page.</p>
  
  <p>Any ideas?</p>
  
  <p>Thanks</p>