4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

reCAPTCHAを中央寄せしたい

Last updated at Posted at 2019-02-15

初期では左寄せされる

Railsで実装したので
= recaptcha_tagsをビューに記述するだけで表示されました。
しかし左寄せで表示されてしまい、不恰好なので中央寄せさせたいです。

スクリーンショット 2019-02-15 14.05.33.png

CSSで中央寄せにする

検証ツールを使用してクラス g-recaptchaを持ったdivタグの下に配置されていることがわかったので、
そのクラスにCSSを当てる。
下記のコードで中央寄せすることが可能。
中央寄せとは関係ないがパスワードの入力フォームと近かった為、margin-topで離している。

reCAPTCHA.css
.g-recaptcha {
  margin-right:auto;
  margin-left:auto;
  text-align: center;
  width:300px;
  margin-top:20px;
}

最終的に

このように中央寄せすることができた!
スクリーンショット 2019-02-15 14.16.46.png

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?