Sujet Précédent

Mettre deux logos entre un texte

aichatou - 17 sept. 2024 à 10:53
Bruno83200_6929 Messages postés 187 Date d'inscription jeudi 18 juin 2020 Statut Membre Dernière intervention 17 septembre 2024 - 17 sept. 2024 à 18:29

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:

1 réponse

Réponse 1 / 1
Bruno83200_6929 Messages postés 187 Date d'inscription jeudi 18 juin 2020 Statut Membre Dernière intervention 17 septembre 2024 31
17 sept. 2024 à 18:29

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

Discussions similaires

Un seul de mes écouteurs marche. Que faire ?
VM_417 -
vali54 -

4 réponses
Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
Alignement du texte à gauche et à droite
Owrell -
Anonyma16_42 -

8 réponses
Excel si cellule contient texte alors...
caba_44 -
RENOU -

41 réponses