Cómo centrar el elemento reCAPTCHA con CSS

Si eres diseñador y quieres ver los elementos de una página web centrados, no te preocupes, no tienes ningún tipo de trastorno obsesivo compulsivo. Cuando hay espacio alrededor de un elemento (ambos lados, derecho e izquierdo) es bastante agradable centrar el elemento para que el espacio no se quede en un solo lado.

Con el famoso elemento reCAPTCHA, centrar la casilla de verificación puede ser bastante difícil de lograr si no sabe qué reglas CSS se aplican a qué elemento respectivamente, por eso en este artículo compartiremos con usted una forma sencilla de centrar este elemento dentro de su formas.

Como primero, la lógica necesaria para centrar este elemento es centrar el texto dentro del contenedor del elemento reCAPTCHA, por lo que puede envolver este elemento dentro de un div y establecer la regla de visualización del elemento recaptcha en inline-block, para que pueda crear 2 clases para esta:

<style>
    .text-center {
        text-align: center;
    }

    .g-recaptcha {
        display: inline-block;
    }
</style>

<div class="text-center">
    <div class="g-recaptcha" data-sitekey="YOUR SITE KEY"></div>
</div>

O, alternativamente, define los estilos en línea:

<div style="text-align: center;">
    <div
        class="g-recaptcha" 
        data-sitekey="YOUR SITE KEY" 
        style="display: inline-block;"
    ></div>
</div>

Con la solución mencionada, tu elemento reCAPTCHA estará centrado en la página.

Que te diviertas ❤️!