Блог

Я использую шаблон AdminLTE, который я использую в качестве макета. В той части, где я собираюсь поместить содержимое, это выглядит так:

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

В представлении, где у меня есть содержимое для отображения, у меня есть:

 @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
 

При выполнении изображение логотипа отображается по центру по горизонтали, но по вертикали оно отображается прикрепленным к верхнему краю. Я пробовал различные формы, но не могу заставить его центрироваться по вертикали. Я не могу понять, как это исправить. Я буду признателен за помощь.

в Bootstrap 4 вы можете использовать .d-flex .align-items-center . https://getbootstrap.com/docs/4.4/utilities/flex/#align-items

Результат выглядит следующим образом:

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

Вот полная демонстрация
https://jsfiddle.net/herupurwito/8oq67jcr/3 /