Центрирование Нет Captcha reCaptcha

После нескольких часов исследований, проб и ошибок я наконец смог добавить в свою форму новый Google No Capatcha re Capatcha и заставить его работать, но по какой-то причине он не центрируется. Есть идеи?

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


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

Ответ 1

Я пошел с:

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

Ответ 2

Это похоже на другие ответы, но я думал, что стоит поделиться. Мне не нравятся значения жесткого кодирования, но ширина No Captcha reCAPTCHA кажется 304px, поэтому вы можете использовать ее как свою ширину:

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

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

Это должно точно центрировать reCAPTCHA.

Ответ 3

Этот css отлично работает для меня:

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

Ответ 4

Мне не нравится идея hardcoding 304px в моем .scss

g-recaptcha html создается как:

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

Это горизонтально центрирует первый внутренний div (который определяет ширину = 304px).

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

Ответ 5

Этот стиль CSS хорошо работает для меня.

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

Ответ 6

Изменение: Этот ответ является в значительной степени худшим в цепочке. Используйте другой, пожалуйста.

Попробуйте добавить

width: 50%;

к вашему css. Я посмотрел на другой ответ, и он сказал, что

display: block;

для IE.

Ответ 7

этот код будет работать.

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

Ответ 8

Используйте этот стиль на своей странице:

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

Ответ 9

Если кто-то использует reCaptcha с Bootstrap, вы можете сделать следующее:

<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;}

Ответ 10

Следующий css отлично работал для меня, оборачивая reCaptcha в div и корректируя значение отступа слева, пока я не центрировал reCaptcha.

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

Ответ 11

С Bootstrap 4 вы можете легко сделать это, создав div, содержащий класс text-center. Затем добавьте в тег класса g-recaptcha d-inline-block

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

Ответ 12

для простых лиц вы можете сделать:

<div class="text-center captcha">
     <p:captcha label="Captcha" size="100%"/>
</div>

.captcha>div>div{
    text-align: center !important;
    margin: 0 auto !important;
}

Ответ 13

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

тестируется на пустых страницах.