Dans ce tutoriel, je vais vous expliquer comment faire pour centrer la fenêtre du script reCaptcha de Google dans une div. En effet, par défaut, la fenêtre est alignée sur la gauche. Ceci peut poser des problèmes esthétiques assez rapidement suivant l'organisation de votre formulaire.

Voici ce qu'on peut avoir quand on ajoute une vérification que l'utilisateur n'est pas un robot, en laissant le comportement par défaut :



Pour centrer le formulaire, on va simplement modifier le style qui lui ai appliqué. Il faut placer ce bout de code CSS après le chargement du script google api et de la div pour éviter d'éventuels problèmes.

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

On voit maintenant que notre div est centrée :



Il s'agit donc un manipulation de style simple et facile effectuer quand on sait quel élément est à sélectionner.

Autre tutoriel pouvant vous intéresser : Rendre Google recaptcha responsive avec CSS / jQuery (et sans jQuery)

  Commentaires

Ajouter un commentaire

Nom / Pseudo

Mail

Commentaire

Informez moi quand il y a un nouveau commentaire

Ajouter