In this tutorial, I'll explain to you how to center the window of Google reCaptcha script in a div. Indeed, by default, the form is aligned on the left. This can cause aesthetic problems fairly quickly depending on the organization of your form.

Here's what you get when you add a check that the user is not a robot, leaving the default behavior:



To center the form, we'll just have to change the style applied to it. You must place this snippet of CSS code after loading the google api script and the div to avoid potential problems.

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

Now we see that our div is centered:



So this is a manipulation simple and easy style make when we know which item is selected.

Another tutorial that may interest you: Make Google reCaptcha responsive with CSS & JQuery (and without jQuery)

  Comments

Add a comment

Name / Nickname

Mail

Comment

Notify me when there is a new comment

Add