Mettre deux logos entre un texte
aichatou
-
bg62 Messages postés 26229 Statut Modérateur -
bg62 Messages postés 26229 Statut Modérateur -
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
- Nombre de jours entre deux dates excel - Guide
- Jeu des logos - Télécharger - Jeux vidéo
- Mettre un texte en majuscule - Guide
- Deux ecran pc - Guide
- Comment faire deux colonnes sur word - Guide
2 réponses
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.
