Centrage Non Captcha reCaptcha
après quelques heures de recherche et d'essais et d'erreurs, j'ai finalement été en mesure d'ajouter le nouveau google No Capatcha re Capatcha à mon formulaire et de le faire fonctionner, mais pour une raison quelconque, il wont center quelqu'un a des idées?
<!-- reCapatcha -->
<div id="capatcha">
<div class="g-recaptcha" data-sitekey=""></div>
</div>
#capatcha {
margin: 0 auto;
display: block
}
10 réponses
je 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>
c'est similaire à d'autres réponses, mais j'ai pensé qu'il valait la peine de partager. Je n'aime pas les valeurs codantes, mais la largeur de la reCAPTCHA No Captcha semble être 304px, donc vous pouvez l'utiliser comme votre largeur:
<style>
div.g-recaptcha {
margin: 0 auto;
width: 304px;
}
</style>
<!-- reCAPTCHA -->
<div class="g-recaptcha" data-sitekey=""></div>
cela devrait centrer la reCAPTCHA exactement.
css fonctionne très 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;
}
je n'aime pas l'idée de coder en dur 304px dans mon .scss
le html g-recaptcha est généré comme:
<div class="g-recaptcha" ... >
<div style="width: 304px; height: 78px;">
<div>
<iframe ... ></iframe>
</div>
<textarea ... ></textarea>
</div>
</div>
ceci centre horizontalement la première div interne (qui spécifie largeur=304px).
<style>
.g-recaptcha > div {
margin: 0 auto;
}
</style>
ce style css fonctionne bien pour moi.
.g-recaptcha > div:first-of-type {
margin: 0 auto;
}
Edit: cette réponse est à peu près la pire de la chaîne. Utiliser une autre s'il vous plaît.
Essayez d'ajouter
width: 50%;
css. J'ai regardé une autre réponse et il a dit qu'
display: block;
pour IE.
ce code sera utilisé.
<div align="center" class="g-recaptcha" data-sitekey="your key code"></div> Utilisez ce style dans votre page<style>
.g-recaptcha>div {margin: 0 auto;}
</style>
si quelqu'un utilise reCaptcha avec Bootstrap vous pouvez faire ce qui 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;}
<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>
testé sur des pages vierges.