中心对齐条纹支付按钮

Question

我无法将 Stripe Payment 按钮置于登录页面的中心位置。我尝试了边距、文本对齐并将其包裹在 div 中，但无济于事。抱歉，我的 css 知识不多，但我会很感激你的帮助！

    `<!-- 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:#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 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 () {
// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
  items: [{plan: 'plan_HBK7An1HxIpxXF', quantity: 1}],

  // 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/fulfillment
  successUrl: window.location.protocol + '//accountinguni.com/success',
  cancelUrl: window.location.protocol + '//accountinguni.com/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>`

Answer 1

尝试内联样式

 <div style="text-align: center; width: 100%;"><button></button></div>

Answer 2

您可以轻松地使用 flex 将元素放在中心，无论是宽度还是高度：

<div class="center">
    // Your Button
</div>

.center{
    display: flex;
    width: 100%;
    justify-content: center;
}

中心对齐条纹支付按钮

Center Align a Stripe Payment Button

css

center