css - google - Centrado No Captcha reCaptcha

recaptcha v3 php

Question

Después de unas pocas horas de investigación y prueba y error, finalmente pude agregar el nuevo Google No Capatcha Re Capatcha a mi formulario y ponerlo en funcionamiento, pero por alguna razón no centraría a nadie ¿tiene alguna idea?

<!-- reCapatcha -->
<div id="capatcha">
    <div class="g-recaptcha" data-sitekey=""></div>
</div>


#capatcha {
    margin: 0 auto;
    display: block
}

Answer 1

Editar: Esta respuesta es la peor de la cadena. Usa otro por favor.

Prueba agregar

width: 50%;

a tu css. Miré otra respuesta y decía que

display: block;

es para IE.

Answer 2

Este css funciona bien para mí:

.g-recaptcha{
   margin: 15px auto !important;
   width: auto !important;
   height: auto !important;
   text-align: -webkit-center;
   text-align: -moz-center;
   text-align: -o-center;
   text-align: -ms-center;
}

Answer 3

Este estilo CSS funciona bien para mí.

.g-recaptcha > div:first-of-type { margin: 0 auto; }

Answer 4

Esto es similar a otras respuestas, pero pensé que valía la pena compartirlo. No me gustan los valores de codificación rígida, pero el ancho de No Captcha reCAPTCHA parece ser de 304 px, por lo que podría usarlo como ancho:

<style>
div.g-recaptcha {
  margin: 0 auto;
  width: 304px;
}
</style>

<!-- reCAPTCHA -->
<div class="g-recaptcha" data-sitekey=""></div>

Esto debería centrar el reCAPTCHA exactamente.

Answer 5

No me gusta la idea de hardcoding 304px en mi .scss

El g-recaptcha html se genera como:

<div class="g-recaptcha" ... >
  <div style="width: 304px; height: 78px;">
    <div>
      <iframe ... ></iframe>
    </div>
    <textarea ... ></textarea>
  </div>
</div>

Esto centra horizontalmente el primer div interno (que especifica ancho = 304px).

<style>
.g-recaptcha > div {
  margin: 0 auto;
}
</style>

Answer 6

Si alguien usa reCaptcha con Bootstrap, puede hacer lo siguiente:

<div class="text-center">
<div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-10">{{> reCAPTCHA}}</div>
    <div class="col-sm-1"></div>
</div>

.text-center{text-align:center;}

Answer 7

Usa este estilo en tu página
<style> .g-recaptcha>div {margin: 0 auto;} </style>

Answer 8

Yo fui con:

<style>
    /* already defined in bootstrap4 */
    .text-xs-center {
        text-align: center;
    }

    .g-recaptcha {
        display: inline-block;
    }
</style>
<div class="text-xs-center">
    <div class="g-recaptcha" data-sitekey=""></div>
</div>

Answer 9

este código será trabajado.

<div align="center" class="g-recaptcha" data-sitekey="your key code"></div>

Answer 10

<style>
#capatcha {
margin: 0 auto;
display block;
}
</style>
<!-- reCapatcha -->
<div style="width: 100px; border: solid 1px;"
<div id="capatcha">
<div class="g-recaptcha" data-sitekey="">1234</div>
</div>
</div>    

probado en la página en blanco funciona.