How to put logo image centered above div using pure css or boostrap?

Question

I want to place logo exactly linked linked below image (centered above div). How it can be this done using css? This template it is designed using tabler.io.

 <div class="container-xl mt-3">
            <div class="d-flex justify-content-center">
                <div class="col-6">
                    <div class="card">
                    <div class="card-body">
                          
                             <img src="{{ asset('backend/img/logo.png') }}" alt="{{ $settings->site_name }}" width="110" height="32" alt="Tabler" class="navbar-brand-image">
                          <div class="col-12 col-md-12 col-lg-12 col-sm-12">
                               <h3 class="card-title">{{ $plan_details->plan_name }}</h3>
                            <form action="{{route('stripe.payment.status', $paymentId )}}"  method="post" id="payment-form">
                                @csrf

                                <div class="form-group">
                                    <div class="mb-2">
                                        <label for="card-element">
                                            Please enter your credit card information
                                        </label>
                                    </div>
                                    <div class="mb-4">
                                        <div id="card-element" style="display: block; width: auto; padding: 0.52rem .75rem; font-size: 2rem; line-height: 1.4; color: #606060; background-color: #ffffff; background-clip: padding-box; border: 1px solid #ccced6; border-radius: .25rem; transition: border-color .20s ease-in-out,box-shadow .20s ease-in-out; box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;">
                                        <!-- A Stripe Element will be inserted here. -->
                                        </div>
                                        <!-- Used to display form errors. -->
                                        <div id="card-errors" class="text-danger" role="alert"></div>
                                        <input type="hidden" name="plan" value="" />
                                    </div>
                                </div>
                                <div class="">
                                  <button
                                  id="card-button"
                                  class="btn btn-danger w-100"
                                  type="submit"
                                  data-secret="{{ $intent }}"
                                > {{ __('Pay Now') }} </button>
                                </div>
                            </form>
                        </div>

                        <br>
                        <a class="mt-2 text-muted text-underline text-center" href="{{route('stripe.payment.cancel', $paymentId )}}"><p>Cancel payment and back to home</p></a>
                    </div>
                </div>
                </div>
            </div>
        </div>

output of the above code it is linked below:

Answer 1

Use flex, but first you should have both the logo and the div inside one div tag. Here you go:

<div class="center-elements">
    <img src="logo.png" />
    <div>
        Invoice from One Medical
    </div>
</div>


<style>
    .center-elements{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

</style>