不能 CSS 将 Stripe 元素居中

Question

我正在使用 Stripe 创建付款表单，但在页面中央显示表单元素时遇到问题。

这是我的简单表格：

<div class="panel">
    <form action="payment.php" method="POST" id="paymentFrm">
        <div class="panel-body">
      
            <!-- Payment form -->
            <div class="form-group">
                <label>CARD NUMBER</label>
                <div id="card_number" class="c"></div>
            </div>

            <div class="form-group">
                <label>EXPIRY DATE</label>
                <div id="card_expiry" class="field"></div>
            </div>

            <div class="form-group">
                <label>CVC CODE</label>
                <div id="card_cvc" class="field"></div>
            </div>


            <button type="submit" class="btn btn-success" id="payBtn">Submit Payment</button>
        </div>
        <div id="paymentResponse"></div>
    </form>

这是我用来创建 Stripe 元素的 JS：

<script src="https://js.stripe.com/v3/"></script>

<script>
// Create an instance of the Stripe object
// Set your publishable API key
var stripe = Stripe('<?php 
  echo 'pk_test_@'; ?>');

// Create an instance of elements
var elements = stripe.elements();

var style = {
    base: {
        fontWeight: 400,
        fontFamily: 'futurabold',
        fontSize: '16px',
        lineHeight: '1.4',
        display: 'flex',
        color: '#555',
        backgroundColor: '#fff',
        '::placeholder': {
            color: '#888',
            fontFamily: 'futurabold',
        },
    },
    invalid: {
        color: '#eb1c26',
    }
};

var cardElement = elements.create('cardNumber', {
    style: style
});
cardElement.mount('#card_number');

var exp = elements.create('cardExpiry', {
    'style': style
});
exp.mount('#card_expiry');

var cvc = elements.create('cardCvc', {
    'style': style
});
cvc.mount('#card_cvc');

// Callback to handle the response from stripe
function stripeTokenHandler(token) {
    // Insert the token ID into the form so it gets submitted to the server
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);
  
    // Submit the form
    form.submit();
}

我尝试更改表单组 class 的 'text-align' CSS 属性，但这导致文本元素显示在中心，而 Stripe 输入元素留在左边：

<div class="form-group" style="text-align: center;">

更改 JS 样式变量也没有帮助：

var style = {
    base: {
        text-align: center}}

如何设置 Stripe 元素的样式，以便它们显示在页面中央？

Answer 1

这取决于您的页面布局方式。您没有提供太多关于页面上使用的其他样式的信息，我们也没有可用的示例。

我相信您可能正在寻找 margin: 0 auto; 这用于将块元素与定义的 width 或 max-width.

居中对齐

Answer 2

表单可以使用 .StripeElement CSS 选择器设置样式：

.StripeElement {
background-color: white;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}

.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
border-color: #fa755a;
}

.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}

不能 CSS 将 Stripe 元素居中

Can't CSS center a Stripe element

javascript

css

stripe-payments