web-dev-qa-db-fra.com

Centrer Aucun Captcha reCaptcha

Après quelques heures de recherche et d’essais et erreurs, j’ai enfin pu ajouter le nouveau numéro de Google No Capatcha re Capatcha à mon formulaire et le faire fonctionner, mais pour une raison quelconque, il n’aurait aucune idée?

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


#capatcha {
    margin: 0 auto;
    display: block
}
csscenter
43
Jacko

J'y suis allé avec:

<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>
103
jxmallett

Ceci est similaire aux autres réponses, mais je pensais que ça valait la peine d'être partagé. Je n'aime pas les valeurs codées en dur, mais la largeur du reCAPTCHA No Captcha semble être de 304px, vous pouvez donc l'utiliser comme largeur:

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

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

Cela devrait centrer le reCAPTCHA exactement.

37
russianmario

Je n'aime pas l'idée de coder en dur 304px dans mon .scss

Le code html de g-recaptcha est généré comme suit:

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

Cela centre horizontalement le premier div interne (qui spécifie width = 304px).

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

Ce css fonctionne bien pour moi:

.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;
}
11
huckbit

Ce style css fonctionne bien pour moi.

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

7
Acrilix

Edit: Cette réponse est à peu près la pire de la chaîne. Utilisez un autre s'il vous plaît.

Essayez d'ajouter

width: 50%;

à vos css. J'ai regardé une autre réponse et il a dit que

display: block;

est pour IE.

5
Blue

ce code sera travaillé.

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

3
chodaict

Si quelqu'un utilise reCaptcha avec Bootstrap, vous pouvez procéder comme suit:

<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;}
0
Nathan Parrott

Utilisez ce style dans votre page
<style> .g-recaptcha>div {margin: 0 auto;} </style>

0
PurTahan

Le css suivant a parfaitement fonctionné pour moi en enveloppant reCaptcha dans un div et en ajustant la valeur padding-left jusqu'à ce que le reCaptcha soit centré. 

<style>
.g-recaptcha div { margin: 0 auto; padding-left: 70px;}
</style>
0
Ivan