Как сделать центр положения изображения в div mpdf

Я хочу сделать отчет в формате pdf с помощью mpdf. Я хочу добавить логотип пользователя на страницу pdf.

Я хочу спросить, как сделать изображение в центре div, даже если размер изображения отличается?

Вот два разных изображения, которые я использовал в качестве примера

https://picsum.photos/200/300 //picture 1

https://picsum.photos/200 // picture 2

Прямо сейчас положение изображения не в центре div. Если изображение является альбомным, оно не находится в центре div.

Вот два разных размера изображения

$mpdf = new \Mpdf\Mpdf(['format' => [145 , 210]]);
$logo = $this->input->get('logo');
$html = $this->load->view('pages/pdfreport',array("logo" => $logo),true);
$mpdf->WriteHTML($html);
    
$mpdf->Image($qrimage, 37, 80, 70, 70, 'jpg', '', true);
$mpdf->Output('report.pdf', 'I');

Вот вид в формате pdf

<html>
<head>
    <style>
        .frame{
            background-color:black;
            margin-top:-20px;
            height:125px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            display: flex;
        }
        .logo {
            max-width: 125px;
            max-height: 125px;
            border-style: none;
            margin: auto;
            display: table-cell;
        }
    </style>
</head>
<body>
    
        <div class = "frame">
            <img class = "logo" id = "logo" src = "<?= $logo; ?>">
        </div>

</body>
</html>

Знаете ли вы, как сделать изображение центром в div, даже если изображение портретное или альбомное?

Спасибо

Отвечает ли это на ваш вопрос? Как я могу центрировать изображение в mpdf?

Finwe 06.04.2021 08:41

Привет @Finwe, у меня есть несколько советов по этому поводу, спасибо

Ikram Shabri 06.04.2021 09:41
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
27
0

Другие вопросы по теме