1

I am using an AdminLte template, which I use as a layout. In the part where I am going to put the content it is like this:

        <div class="content-wrapper">
            <section class="content">
                    @yield('content')
            </section>
            <!-- /.content -->
        </div>

In the view where I have the content to display I have:

@extends('layouts.app')

@section('content')
    <div>
        <img class="mx-auto my-auto d-block" src="{{ asset('dist/img/logo.png')}}" alt="logo" style="opacity: .2">
    </div>
@endsection

When executing, the image of the logo appears centered horizontally, but vertically it appears attached to the upper margin. I've tried various shapes, but can't get it to center vertically. I can't figure out how to fix it. I will appreciate a help.

enter image description here

1 Answer 1

2

in Bootstrap 4, you can use .d-flex .align-items-center https://getbootstrap.com/docs/4.4/utilities/flex/#align-items

The result like this:

<div class="content d-flex align-items-stretch bg-info w-100">

    <div class="d-flex bg-info w-100">
        <div class="d-flex align-items-center w-100">
            <img class="w-100" src="https://via.placeholder.com/800x200">
        </div>
    </div>
</div>

Here full demo https://jsfiddle.net/herupurwito/8oq67jcr/3/

1
  • 1
    Thank you very much sir, your contribution solved the problem. Have a nice day. Nov 23, 2020 at 13:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.