web-dev-qa-db-ja.com

Centering No 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
}
cssrecaptchacenter
48
Jacko

私は一緒に行きました：

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

これは他の回答と似ていますが、共有する価値があると思いました。ハードコーディング値は好きではありませんが、No Captcha reCAPTCHAの幅は304pxのように見えるため、それを幅として使用できます。

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

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

これにより、reCAPTCHAが正確に中央に配置されます。

37
russianmario

この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;
}
13
huckbit

ハードコーディングのアイデアが気に入らない304px私の.scss

G-recaptcha htmlは次のように生成されます。

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

これにより、最初の内部div（width = 304pxを指定）が水平方向に中央揃えされます。

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

このCSSスタイルは私に適しています。

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

編集：この答えは、チェーンの中で最も最悪のものです。他のいずれかを使用してください。

追加してみてください

width: 50%;

あなたのCSSに。私は別の答えを見て、それは言った

display: block;

iE用です。

5
Blue

このコードは機能します。

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

誰かがBootstrap=でreCaptchaを使用している場合、以下を実行できます。

<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

ページでこのスタイルを使用します。

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

Bootstrap 4を使用すると、text-centerのクラスを含むdivを作成することにより、これを簡単に行うことができます。その後、g-recaptchaクラスタグd-inline-blockに追加します

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

次のcssは、reCaptchaをdivにラップし、reCaptchaが中央にくるまでpadding-leftの値を調整することで、完璧に機能しました。

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