Центрирование Google Recaptcha

Question

Я начал использовать капчу Google для серии отправки форм на моем сайте, мне пришлось изменить размер указанных каптч из-за того, что они были слишком большими для модалов, а часть из них лежала вне модалов, поэтому я изменил их размеры следуя инструкциям здесь . К счастью, изменение размера сработало, теперь капчи отображаются в правильном размере для модального окна, но они не отображаются по центру, и у меня не осталось вариантов центрировать их, я перепробовал почти все, но они отказываются центрироваться.

Я попытался добавить классы my-auto, text-align: center; и display: inline-block; на капчу и text-center и justify-content-center в родительские div, ни один не сработал.

Я не получаю сообщений об ошибках, и я из идеи тоже.

Я использую Bootstrap 4.

Ниже моего модального кода:

<div class="modal fade" id="modal-consulta" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">CONSULTA</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action=".\php\consulta.php" method="POST" enctype="multipart/form-data">
                    <div class="form-group row" style="margin-bottom: 9px;">
                        <label class="col-sm-2 col-form-label font-weight-bold">Nombre</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre" required>
                        </div>
                    </div>
                    <div class="form-group row" style="margin-bottom: 9px;">
                        <label class="col-sm-2 col-form-label font-weight-bold">Telefono</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="telefono" name="telefono" placeholder="Telefono" required>
                        </div>
                    </div>
                    <div class="form-group row" style="margin-bottom: 9px;">
                        <label class="col-sm-2 col-form-label font-weight-bold">Mail</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="mail" name="mail" placeholder="Mail" required>
                        </div>
                    </div>
                    <div class="form-group row" style="margin: 0px 0px 4px 0px;">
                        <label class="col col-form-label font-weight-bold" style="padding-left: 0px;">Consulta</label>
                    </div>
                    <div class="form-group row" style="margin-bottom: 9px;">
                        <textarea id="consulta" name="consulta" class="col form-control" rows="4" style="margin: 0px 15px 0px 15px;"></textarea>
                    </div>
                    <div class="col text-center">
                        <div class="row justify-content-center" style="margin-bottom: 9px;">
                            <div class="g-recaptcha" data-sitekey=""></div>
                        </div>
                        <button type="submit" class="btn btn-success">ENVIAR CONSULTA</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">DESCARTAR</button>
            </div>
        </div>
    </div>
</div>

Ниже моего размера CSS код:

.g-recaptcha {
    transform:scale(0.77);
    -webkit-transform:scale(0.77);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
}

Вот изображение:

Заранее благодарю за ваше время, и я с нетерпением жду возможности стать частью этого сообщества, в которое я слышал так много позитивных вещей.

Answer 1

Как и HDP, я тестировал его на рабочем столе, и он работал нормально. Я использовал Angular для его репликации и поэтому использовал <re-captcha> тег вместо class="g-recaptcha".

С какими технологиями / средами вы реализовали приложение? Какой браузер вы используете на этом Android?

Просматривая различные мои старые Android проекты, я нашел кое-что, что вы можете попробовать. Это было реализовано с Angular 6 и Bootstrap 4 для работы на мобильных устройствах, возможно, это поможет вам разработать решение:

<div class="container">
    <!-- Headline -->
    <div class="row">
      <div class="col text-center">
        <br>
        <p>
          Things are only impossible until they are not!<br>
          <br>
        </p>
      </div>
    </div>

    <!-- Image/Frame -->
    <div class="row mt-2">
      <div class="col d-flex justify-content-center">
        <div class="frame d-flex align-content-center flex-wrap">
          <div class="mx-auto">
              <i class="fa fa-check-circle-o" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- Button -->
    <div class="row mt-5">
      <div class="col d-flex justify-content-center mb-5">
        <button class="btn btn-lg btn-checkStyle rounded-pill px-5" [disabled]="clicked" (click)="doSomething()">Register now</button>
      </div>
    </div>
</div>

Answer 2

Почему бы вам не установить левое и правое поле для auto для кнопки? Капчу нужно поставить под свой div. Или используйте text-align:center; с родительским div. Не забудьте также использовать современный браузер.