Div card centred

Question

Hi Team

I need help with my div card it is centred but the button is not properly inline with the div card. Also reducing the container its wide open

 

$htmlForm = '<div class="card text-center">
    <div class="card-body">
        <div class="col-lg-6 mx-auto">
            <div class="blog-3-each mb-30 transition-4">
                <div class="blog-date text-left text-sm-center">
                    <img src="img/payfast.png" alt="Icon">
                </div>
                <div class="blog-content">
                    <h5 class="fs-19 f-700 mb-10">

                    </h5>
                    <div class="hr-1 opacity-1 mt-10 mb-10"></div>
                    <p><b> You can easily make an online payment below using PayFast.</b></p>


                        <input required type="hidden" name="cmd" value="_paynow">
                        <input required type="hidden" name="receiver" pattern="[0-9]" value="' . $data['merchant_id'] . '">

                        <input required type="hidden" name="item_name" maxlength="255" value="Pay Now">
                        <input required type="amount" name="amount" value="'. $data['amount'].'">
                        <input required type="hidden" name="merchant_id" value="' . $data['merchant_id'] . '">
                        <input required type="hidden" name="merchant_key" value="' . $data['merchant_key'] . '">
                        <input required type="hidden" name="return_url" value="' . $data['return_url'] . '">
                        <input required type="hidden" name="cancel_url" value="' . $data['cancel_url'] . '">
                        <input required type="hidden" name="notify_url" value="' . $data['notify_url'] . '">
                        <input required type="hidden" name="email_address" value="' . $data['email_address'] . '">
                        <input required type="hidden" name="name_first" value="' . $data['name_first'] . '">
                        <input required type="hidden" name="name_last" value="' . $data['name_last'] . '">

                        <div class="text-center">
						<input type="image" src="images/buttons/PayNow/Dark-Large-PayNow.png" alt="Pay Now" title="Pay Now with Payfast">

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>';

echo $htmlForm;

Markup

Copy

Answer 1

can you show the output so accordigly i can suggest you the solution ether you can shared css i will fix it. 

Answer 2

Hi Deepak

Kindly please see below the UI design of the output. The container is too big need to reduce it and position the button to be centred.

Answer 3

Reffer this link 

https://www.w3.org/Style/Examples/007/center.en.tmpl