居中对齐条形付款按钮

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;
}