如何在着陆页居中Stripe支付按钮？已尝试多种CSS方法无效

Hey there! Let's get that Stripe button centered properly. I know you've tried a few approaches already, so let's break down why those might not have stuck and give you two reliable solutions.

Why Your Previous Attempts Might Have Failed #

Buttons are inline-block elements by default—here's the catch:

• If you tried text-align: center on a wrapping div but the div didn't span the full width of its container, the button would only center within that narrow div.
• Using margin: auto directly on the button won't work unless you first set it to a block element—inline-block elements don't respect horizontal margin: auto.

Solution 1: Wrap in a Full-Width Div with Text-Align #

This is the simplest approach if you want to keep the button as an inline-block element. Wrap your button in a div that spans the full width of its parent, then set text-align: center on the div:

<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>
<!-- Centered wrapper div -->
<div style="width: 100%; text-align: center;">
  <!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
  <button style="background-color:#FF8800;color:#FFF; padding:8px 12px;border:0;border-radius:4px;font-size:1.5em" id="checkout-button-plan_HBK7An1HxIpxXF" role="link">Start Free Trial</button>
</div>
<div id="error-message">
</div>
<script>
/* <![CDATA[ */
(function() {
  var stripe = Stripe('pk_live_tkRbcnwJtcbR40owQTnDC3E0');
  var checkoutButton = document.getElementById('checkout-button-plan_HBK7An1HxIpxXF');
  checkoutButton.addEventListener('click', function () {
    stripe.redirectToCheckout({
      items: [{plan: 'plan_HBK7An1HxIpxXF', quantity: 1}],
      successUrl: window.location.protocol + '//accountinguni.com/success',
      cancelUrl: window.location.protocol + '//accountinguni.com/canceled',
    })
    .then(function (result) {
      if (result.error) {
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
})();
/*]]>*/
</script>

Solution 2: Make the Button a Block Element with Margin Auto #

If you prefer not to add an extra div, you can adjust the button's display property directly. Set it to block and use margin: 0 auto to center it horizontally:

<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>
<!-- Button set to block with auto margins -->
<button style="background-color:#FF8800;color:#FFF; padding:8px 12px;border:0;border-radius:4px;font-size:1.5em; display: block; margin: 0 auto;" id="checkout-button-plan_HBK7An1HxIpxXF" role="link">Start Free Trial</button>
<div id="error-message">
</div>
<script>
/* <![CDATA[ */
(function() {
  var stripe = Stripe('pk_live_tkRbcnwJtcbR40owQTnDC3E0');
  var checkoutButton = document.getElementById('checkout-button-plan_HBK7An1HxIpxXF');
  checkoutButton.addEventListener('click', function () {
    stripe.redirectToCheckout({
      items: [{plan: 'plan_HBK7An1HxIpxXF', quantity: 1}],
      successUrl: window.location.protocol + '//accountinguni.com/success',
      cancelUrl: window.location.protocol + '//accountinguni.com/canceled',
    })
    .then(function (result) {
      if (result.error) {
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
})();
/*]]>*/
</script>

If It Still Doesn't Work #

If neither solution works, there's probably existing CSS on your page overriding these styles. Right-click the button in your browser and select "Inspect" to check the "Styles" panel—look for rules that might be setting float, position, or restricting the width of the button or its parent container. You can add !important to the styles temporarily to test (though it's better to fix the specificity issue if possible):

/* Example for Solution 2 */
display: block !important;
margin: 0 auto !important;

内容的提问来源于stack exchange，提问作者Nathan Garrett