28112 sujets

CSS et mise en forme, CSS3

Bonjour,

J'espère que vous allez bien.

Peut-être pourriez-vous m'aider, voici mon challenge: je compte utiliser Stripe pour ajouter une page de paiement sur Wordpress.

Stripe me fourni un bout de code html que je colle dans un widget de Wordpress.

Tout semble fonctionner, j'ai cependant besoin que le bouton soit centré, or il est complètement à gauche.

J'ai juste pu modifier la couleur et le nom (les restes de la formation ^^), mais je rame pour le placer au centre.

Sachant que je n'ai aucun ficher de traitement, tout se fait sur le code html fourni par Stripe, commencer placer le bouton au centre ?

Merci à vous.
Wilson.


<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>

<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
  style="background-color:#06e809;color:#FFF;padding:8px 12px;border:0;border-radius:10px;font-size:1em"
  id="checkout-button-price_1IZh2UJeqXuNj1OcQjrOuQQX"
  role="link"
  type="button"
>
  Accéder au Pack Confiance en Soi
</button>

<div id="error-message"></div>

<script>
(function() {
  var stripe = Stripe('pk_test_Z7WCo5oUXnhfCMMKeEh49Tds00TYAWyZ8h');

  var checkoutButton = document.getElementById('checkout-button-price_1IZh2UJeqXuNj1OcQjrOuQQX');
  checkoutButton.addEventListener('click', function () {
    /*
     * When the customer clicks on the button, redirect
     * them to Checkout.
     */
    stripe.redirectToCheckout({
      lineItems: [{price: 'price_1IZh2UJeqXuNj1OcQjrOuQQX', quantity: 1}],
      mode: 'payment',
      /*
       * Do not rely on the redirect to the successUrl for fulfilling
       * purchases, customers may not always reach the success_url after
       * a successful payment.
       * Instead use one of the strategies described in
       *  https://stripe.com/docs/payments/checkout/fulfill-orders
 
       */
      successUrl: 'https://elevalife.fr/success',
      cancelUrl: 'https://elevalife.fr/canceled',
    })
    .then(function (result) {
      if (result.error) {
        /*
         * If `redirectToCheckout` fails due to a browser or network
         * error, display the localized error message to your customer.
         */
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
})();
</script>
Modérateur
Salut,

Il faut mettre un text-align: center; sur le parent du boutton. Mais là il n'y en a pas. Il est bien posé quelque part ce bouton non ?
Bonjour Laurent,
Merci de ta réponse, alors je suis novice dans ce domaine, je ne vois pas trop ce qu'est le parent du bouton, mais je peux ajouter "text-align: center;" juste avant "background-color" dans l'attribut style comme suit :


style="text-align: center;background-color:#06e809;color...


je fais un essai ^^
Re; alors lorsque que j'ajoute le bout de code:

style="text-align: center;background-color:#06e809;color...(la suite voir plus haut).


je ne vois pas de changement, sur mobile c'est centré, mais sur ordinateur ou tablette c'est complètement à gauche comme suit:

Merci ^^
Modérateur
Alors si tu regarde bien :
<button
  style="background-color:#06e809;color:#FFF;padding:8px 12px;border:0;border-radius:10px;font-size:1em"
  id="checkout-button-price_1IZh2UJeqXuNj1OcQjrOuQQX"
  role="link"
  type="button"
>
  Accéder au Pack Confiance en Soi
</button>

L'attribut style est rattaché au bouton. Donc rajouter un text-align center ici centrera le contenu du bouton et non le bouton lui même.


Ce que je cherche a savoir c'est, dans le code global, sur ta page affichée, dans quel élément se situe le bouton ? Tu colles ton bout de code dans un widget mais au final il sera embarqué dans quelque chose.
Pour savoir ça il faut inspecter l'élément (Click droit et "inspecter") ou le inspecter code (F12) et rechercher l'élément. Il faut regarder qui est son conteneur et quelle classe ou ID il possède pour pouvoir rajouter le text-align: center dessus... désolé si c'est un peu brouillon c'est peut être pas ouf pour commencer...


Solution de secours peut être plus simple pour toi : rajouter margin: auto; et display: block; dans le style="" :
<button
  style="background-color:#06e809;color:#FFF;padding:8px 12px;border:0;border-radius:10px;font-size:1em;margin:auto;display:block;"
  id="checkout-button-price_1IZh2UJeqXuNj1OcQjrOuQQX"
  role="link"
  type="button"
>
  Accéder au Pack Confiance en Soi
</button>

Au bluff Smiley lol
(y'a des chance pour que ca ne marche pas selon ce qu'il y a au dessus)

Et sinon faudra penser un jour a regarder comment séparer les CSS de l'HTML parceque coder come ca c'est pas l'idéal Smiley cligne
Modifié par _laurent (29 Mar 2021 - 14:44)
Meilleure solution
Bonjour Laurent,
Vous venez d'illuminer ma journée,
plus sérieusement ça fonctionne : o
merci, alors j'avais essayé margin: auto sans résultat, tu peux m'expliquer ce qu'est display block ? et pourquoi avais-tu un doutes si ça allait fonctionné ou non ?
Merci milles et une fois ^^
Wilson.
Modérateur
Je ne sais pas trop comment l'expliquer avec des termes simples du coup je vais paraphraser w3school :
C'est une propriété qui spécifie le comportement de rendu des éléments
https://www.w3schools.com/CSSref/pr_class_display.asp

Dans les principaux tu as :

"inline" ca c'est le comportement du texte (juste de la taille du text et insensible a pas mal de truc comme le margin ou padding je sais plus
"block" ça c'est comme une div, ca fais un gros block ne plein milieu qui prend toute la largeur disponible du coup ils s'empilent
"inline-block" ca c'est un hybrid, y'a les comportement du block mais c'est juste de la taille du texte et ils viennent cote a cote sur la meme ligne
et y'en a plein d'autres tu peux tester ici :
https://www.w3schools.com/CSSref/playit.asp?filename=playcss_display&preval=flex

Le bouton est par défaut en inline-block et le centrage avec magin auto n'est possible que sur un block

Et sinon j'avais un doute car, si l'élément au dessus était de type inline-block par exemple ça ne fonctionnerait pas : https://jsfiddle.net/pdf0trb4/1/

Bonne journée !
tout est clair,
D'accord, je comprend mieux, tout fonctionne grace à toi.
Merci Laurent de tes réponses et de ton aide ^^
Excellente journée.