如何根据容器尺寸调整Google reCAPTCHA大小并对齐容器

问题说明 #

• Google reCAPTCHA 无法对齐至容器内部
• 验证码右侧边框不可见
• 两处场景下显示效果不一致

相关代码 #

<div id="googleRecaptcha" class="">
    <div  class="g-recaptcha" data-sitekey="${siteKey}" data-callback="" data-expired-callback="">
    </div>
</div>

效果截图 #

修复方案 #

1. 调整容器基础样式 #

给外层容器设置匹配reCAPTCHA标准尺寸的宽度，同时清除默认边距，确保对齐：

#googleRecaptcha {
    width: 304px; /* reCAPTCHA 官方默认宽度 */
    margin: 0 auto; /* 水平居中，按需调整 */
    padding: 0;
    box-sizing: border-box;
}

2. 修复reCAPTCHA内部样式溢出 #

覆盖Google生成的内联样式，避免容器挤压导致边框被隐藏：

.g-recaptcha > div {
    width: 100% !important;
    overflow: visible !important;
}

3. 排查全局样式冲突 #

检查项目中是否有全局CSS规则（如非标准box-sizing、强制宽度）干扰显示，建议统一全局盒模型：

* {
    box-sizing: border-box;
}

4. 响应式适配（可选） #

如果需要适配移动端，添加媒体查询调整容器宽度：

@media (max-width: 320px) {
    #googleRecaptcha {
        width: 100%;
    }
}

内容的提问来源于stack exchange，提问作者cshendye