Mettre deux logos entre un texte

aichatou -  
bg62 Messages postés 23735 Date d'inscription   Statut Modérateur Dernière intervention   -

Bonjour, je voudrais avoir votre aide, je génère une page pdf avec vendor. Je veux mettre deux logos qui centrent bien un texte. Le problème est que les deux logos sont au dessus du texte. Je voudrais que un logo soit à côté du 'Ministère' et l'autre à côté de 'Supérieur' Voici le code:

<?php
require 'vendor/autoload.php';

// Utiliser Html2Pdf
use Spipu\Html2Pdf\Html2Pdf;

// Créer une instance de Html2Pdf
$html2pdf = new Html2Pdf('P', 'A4', 'fr');

// Contenu HTML
$html = '
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; }
        h1, h2 { margin: 0; }
        .header  { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            margin-bottom: 20px; 
            width: 100%;
        }
        .logo-container { 
            display: flex; 
            align-items: center; 
        }
        .logo-container img { 
            height: 50px; 
            margin: 0 0px; /* Spacing between logos and text */
        }
        .header-content { 
            text-align: center; 
             margin-top: 5px; /* Adjust this value to move text up or down */
        }
        .container { 
            margin: 40px; 
        }
        .section { 
            margin-bottom: 40px; 
        }
        .signature { 
            text-align: right; 
            margin-top: 20px; 
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo-container">
                <img src="assets/dist/img/photo.jpg" class="img-circle elevation-2" alt="User Image" style="float:right">
        <div class="logo-container">
                <img src="assets/dist/img/photo.jpg" class="img-circle elevation-2" alt="User Image" style="float:left">
            </div>
            <div class="header-content">
                <h1>REPUBLIQUE DU NIGER</h1>
                <h2>Ministère de l\'Enseignement Supérieur,<br>de la Recherche et de l\'Innovation Technologique</h2>
                <h2>Université André Salifou</h2>
            </div>
           
        
            </div>
        </div>
        <div class="section">
            <p>Je soussigné, Le Recteur de l\'Université André Salifou, certifie que :</p>
            <p>
                Le nom <b>[Nom]</b>, le prénom <b>[Prénom]</b> a obtenu son diplôme de <b>[Nom du Diplôme]</b> en <b>[Nom du Département]</b>, spécialité <b>[Nom de la Spécialité]</b>.
            </p>
            <p class="signature">Fait à Zinder, le ' . date('d F Y') . '</p>
        </div>
    </div>
</body>
</html>
';

// Convertir le HTML en PDF
$html2pdf->writeHTML($html);

// Sortir le PDF
$html2pdf->Output('certificat_diplome.pdf', 'I');
?>

Voici le capture d'écran de l'image:


Windows / Firefox 130.0

A voir également:

2 réponses

Bruno83200_6929 Messages postés 634 Date d'inscription   Statut Membre Dernière intervention   146
 

Bonjour,

Pour positionner correctement vos logos à côté du texte, il est important de bien structurer la disposition avec flexbox. Vous avez actuellement deux logos dans des div imbriqués, mais vous voulez qu'ils soient côte à côte, avec un texte centré au milieu.

 J'ai corrigé la structure HTML et les styles CSS.

<?php
require 'vendor/autoload.php';

// Utiliser Html2Pdf
use Spipu\Html2Pdf\Html2Pdf;

// Créer une instance de Html2Pdf
$html2pdf = new Html2Pdf('P', 'A4', 'fr');

// Contenu HTML
$html = '
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; }
        h1, h2 { margin: 0; }
        .header  { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; /* Assure que les logos sont aux extrémités */
            margin-bottom: 20px; 
            width: 100%;
        }
        .logo-container img { 
            height: 50px; 
            margin: 0 20px; /* Espacement entre les logos et le texte */
        }
        .header-content { 
            text-align: center; 
            flex-grow: 1; /* Pour que le texte prenne toute la place disponible entre les logos */
        }
        .container { 
            margin: 40px; 
        }
        .section { 
            margin-bottom: 40px; 
        }
        .signature { 
            text-align: right; 
            margin-top: 20px; 
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo-container">
                <img src="assets/dist/img/photo.jpg" class="img-circle elevation-2" alt="Logo Gauche">
            </div>
            <div class="header-content">
                <h1>REPUBLIQUE DU NIGER</h1>
                <h2>Ministère de l\'Enseignement Supérieur,<br>de la Recherche et de l\'Innovation Technologique</h2>
                <h2>Université André Salifou</h2>
            </div>
            <div class="logo-container">
                <img src="assets/dist/img/photo.jpg" class="img-circle elevation-2" alt="Logo Droite">
            </div>
        </div>
        
        <div class="section">
            <p>Je soussigné, Le Recteur de l\'Université André Salifou, certifie que :</p>
            <p>
                Le nom <b>[Nom]</b>, le prénom <b>[Prénom]</b> a obtenu son diplôme de <b>[Nom du Diplôme]</b> en <b>[Nom du Département]</b>, spécialité <b>[Nom de la Spécialité]</b>.
            </p>
            <p class="signature">Fait à Zinder, le ' . date('d F Y') . '</p>
        </div>
    </div>
</body>
</html>
';

// Convertir le HTML en PDF
$html2pdf->writeHTML($html);

// Sortir le PDF
$html2pdf->Output('certificat_diplome.pdf', 'I');
?>

Les logos sont placés dans des div séparés à gauche et à droite du texte.

Le texte est placé au centre avec flex-grow: 1, ce qui permet d'étirer l'espace entre les logos.

J'ai ajouté un espacement de 20px autour des logos pour qu'ils ne soient pas trop proches du texte.


0
bg62 Messages postés 23735 Date d'inscription   Statut Modérateur Dernière intervention   2 410
 

commence en premier lieu par séparer ton 'code' (html) et ta mise en forme(feuille de style CSS ...  ce sera beaucoup plus simple pour la suite :)


0