it-swarm.com.de

Zentrieren Kein Captcha-reCaptcha

Nach ein paar Stunden Forschung und Versuch und Irrtum konnte ich endlich das neue Google No Capatcha re Capatcha zu meinem Formular hinzufügen und es zum Laufen bringen, aber aus irgendeinem Grund wird es niemanden zentrieren, der irgendwelche Ideen hat?

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


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

Ich ging mit:

<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

Dies ist ähnlich wie bei anderen Antworten, aber ich dachte, es wäre wert, es zu teilen. Ich mag keine hartcodierenden Werte, aber die Breite von No Captcha reCAPTCHA scheint 304px zu sein. Sie könnten dies also als Breite verwenden:

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

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

Dies sollte den reCAPTCHA exakt zentrieren.

37
russianmario

Ich mag die Vorstellung von Hardcoding 304px in meinem .scss nicht

Das g-recaptcha-HTML wird wie folgt generiert:

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

Dadurch wird das erste innere div horizontal zentriert (was width = 304px angibt).

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

Diese CSS funktioniert gut für mich:

.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

Dieser CSS-Stil funktioniert gut für mich.

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

7
Acrilix

Edit: Diese Antwort ist so ziemlich die schlechteste in der Kette. Verwenden Sie bitte eine andere.

Versuchen Sie das Hinzufügen

width: 50%;

zu deiner css. Ich sah mir eine andere Antwort an und sie sagte das

display: block;

ist für IE.

5
Blue

dieser Code wird bearbeitet.

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

3
chodaict

Wenn jemand reCaptcha mit Bootstrap verwendet, können Sie Folgendes tun:

<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

Verwenden Sie diesen Stil auf Ihrer Seite
<style> .g-recaptcha>div {margin: 0 auto;} </style>

0
PurTahan

Mit Bootstrap 4 können Sie dies auf einfache Weise tun, indem Sie ein Div mit einer Klasse von Text-Center erstellen und dann dem g-recaptcha-Klassen-Tag d-inline-block hinzufügen

<div class="text-center"><div class="g-recaptcha d-inline-block" data-sitekey="your-site-key-here"></div></div>
0
Foo Wing Li

Der folgende Befehlssatz funktionierte perfekt für mich, indem er das reCaptcha in ein div einwickelte und den Wert für das Auffüllen der linken Polsterung anpasste, bis ich das reCaptcha zentriert hatte. 

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