Sujet Précédent Sujet Suivant

Mettre deux logos entre un texte

aichatou - 17 sept. 2024 à 10:53
bg62 Messages postés 23664 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 17 décembre 2024 - 20 sept. 2024 à 17:04

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:

Mettre deux logos entre un texte
Mettre un texte en majuscule - Guide
Les logos et leurs noms - Télécharger - Jeux vidéo
Excel cellule couleur si condition texte - Guide
Transcription audio en texte word gratuit - Guide
Deux ecran pc - Guide

2 réponses

Réponse 1 / 2

Bruno83200_6929 Messages postés 282 Date d'inscription jeudi 18 juin 2020 Statut Membre Dernière intervention 23 octobre 2024 57
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.

Réponse 2 / 2

bg62 Messages postés 23664 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 17 décembre 2024 2 392
20 sept. 2024 à 17:04

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

Discussions similaires

Un seul de mes écouteurs marche. Que faire ?

adele

Comment supprimer une conversation Messenger pour les 2 personnes ?

copie de texte

Votre réponse

Discussions similaires