在 Contact Form 7 (WP) 中将 Google Recaptcha 字段居中对齐

Question

真的很难在 Contact 7 表单中居中对齐 Recaptcha。

我尝试了多种来自 Google 的解决方案，但都没有奏效。

我不知道需要哪个位，所以这里是元素：

<div role="form" class="wpcf7" id="wpcf7-f116-p87-o1" lang="en-US" dir="ltr">
    <div class="screen-reader-response"></div>
    <form action="/contactus/?w3tc_note=flush_all#wpcf7-f116-p87-o1" method="post" class="wpcf7-form" novalidate="novalidate">
        <div style="display: none;"> <input type="hidden" name="_wpcf7" value="116"> <input type="hidden" name="_wpcf7_version" value="5.0.4"> <input type="hidden" name="_wpcf7_locale" value="en_US"> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f116-p87-o1"> <input type="hidden" name="_wpcf7_container_post" value="87"> </div>
        <p><label> Your Name (required)<br>
                <span class="wpcf7-form-control-wrap your-name"><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"></span> </label></p>
        <p><label> Your Email<br>
                <span class="wpcf7-form-control-wrap your-email"><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"></span> </label></p>
        <p><label> Your Phone Number<br> <span class="wpcf7-form-control-wrap tel-563"><input type="tel" name="tel-563" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false"></span> </label></p>
        <p><label> Subject<br>
                <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></span> </label></p>
        <p><label> Your Message<br>
                <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
        <p><label> Please confirm you're a human</label></p>
        <div class="wpcf7-form-control-wrap">
            <div data-sitekey="XXXXXXXXXXXXX" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha">
                <div style="width: 304px; height: 78px;">
                    <div><iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=XXXXXXXXXXXXX-nrxCQzWkg_6m86NQ2Veyo&amp;co=aHR0cDovL3ZrMWhhaXIuY28udWs6ODA.&amp;hl=en&amp;v=v1540189908068&amp;size=normal&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"></iframe></div><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;"></textarea>
                </div>
            </div> <noscript>
                <div style="width: 302px; height: 422px;">
                    <div style="width: 302px; height: 422px; position: relative;">
                        <div style="width: 302px; height: 422px; position: absolute;">
                            <iframe src="https://www.google.com/recaptcha/api/fallback?k=XXXXXXXXXXXXX-XXXXXXXXXXXXX" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;">
                            </iframe> </div>
                        <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;">
                            <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;">
                </textarea> </div>
                    </div>
                </div>
            </noscript>
        </div>
        <p> </p>
        <p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>
        <div class="wpcf7-response-output wpcf7-display-none"></div>
    </form>
</div>

另一位用户说可能更容易看到，所以我把上面的代码上传到了这里的 html 中：http://stargazysolutions.com/users/test.htm

只是想让recaptcha在页面中间居中。

有什么想法吗？

谢谢

Answer 1

将此代码添加到您主题的 style.css 文件中，保存并再次检查您发布此表单的 WordPress 联系页面。

.wpcf7-recaptcha > div {
    margin: 0 auto;
}

注意：它将使所有CF7表格生效，并使所有Recaptcha字段居中对齐。