Centrage d'une image (balises HTML supportées)

hello,

pour centré ton image, tu peux lui donner une classe en lui spécifiant que tu lui veux en mieux c'est-à-dire

img {
margin: 0 auto;
}

ou sinon tu peux utilisé les flexbox avec

.tr-img {
display: flex;
justify-content: center;
}

il faudrai mettre ta class sur la balise tr qui à l'image
et normalement tu pourras centré ton image

Merci de ta réponse.

N'étant pas développeur, il faudrait que tu m'en dises un peu plus sur la façon de "mettre ma class sur la balise tr".

Où et comment dois-je insérer le code que tu me proposes ? 😉

il faut que tu ajoute la class css dans le html

<td class=".tr-img"><img src="./pics/logos/2021_logo_couleur_fond_transparent_AG31.png" style="width:300px;height:228px;"></td>

Ok, de cette façon ?

<table>
   <tr>
          <td class=".tr-img"><img src="./pics/logos/2021_logo_couleur_fond_transparent_AG31.png" style="width:300px;height:228px;"></td>
   </tr>
</table>

Mais là, je ne vois plus où je dis que je centre l'image... 🤔

oui comme ça !

il faut que tu as joute le css que je t'ai donné

Ok, par contre où dois-je mettre le css pour qu'il soit correctement pris en compte ?

<table>
   <tr>
          img {
             margin: 0 auto;
          }
          <td class=".tr-img"><img src="./pics/logos/2021_logo_couleur_fond_transparent_AG31.png" style="width:300px;height:228px;"></td>
   </tr>
</table>

Est-ce que cet emplacement est correct ? :)

non.

tu as pas un fichier css ?

<table>
   <tr>
          <td class=".tr-img"><img src="./pics/logos/2021_logo_couleur_fond_transparent_AG31.png" style="width:300px;height:228px;"></td>
   </tr>
</table>

et dans ton fichier css

          img {
             margin: 0 auto;
          }

Non justement, je n'ai pas de fichier CSS. :(

Le logiciel GLPI me propose juste d'afficher un logo, en remplissant une page de texte et en stipulant que les "balises HTML sont supportées:

https://www.casimages.com/i/22042502263326004717876463.jpg.html][IMG]https://nsm09.casimages.com/img/2022/04/25//mini_22042502263326004717876463.jpg

Du coup, je ne sais pas où mettre le code CSS que tu m'as transmis. :)

tu met juste ton image alors

 <img src="./pics/logos/2021_logo_couleur_fond_transparent_AG31.png" style="width:300px;height:228px;">

Ok, mais sans le code supplémentaire CSS, je ne pourrai donc pas center l'image.

Y-a-t-il possibilité néanmoins de décaler l'affichage de l'image vers la droite ?

Heliii ! heloooo ! :3

J'ai un petite idée ... c'est pas le plus propre mais ca marche :
Jai fait des tests en local sur un projet. Enfaite, c'est étonnant, je ne savais pas qu'un margin auto ( le margin auto, c'est un paramétrage en css qui permet de centrer un élément en "trichant sur les marges) ne fonctionne pas quand il est injecté dans le style de la balise image :x

Ce que je comprend, c'est que tu veux modifier ton élément (img) sans toucher au css de GLPI.
J'ai réussi à centrer l'élement en utilisant avant une balise <div></div> (qui permet de créer des "blocs") que j'ai centré, après, je préviens ... c'est pas propre ^^', ca me fait un peut transpirer :)

Ce que j'ai fait : J'ai créer une div dans laquelle j'ai centré les texts, pour ensuite centrer avec un text-align. Cette Div englobe l'image, les règle s'appliquent alors sur l'image. J'ai un peut netoyer pour mêtre la hauteur et la largeur non plus depuis la balise style mais en paramètre de ta balaise d'image. Par sécurité, je lui ai mis une class, mais ce n'est pas obligatoire.

Tente avec ca :

      <div class="logo_perso" style="text-align: center">
        <img
          src="./pics/logos/2021_logo_couleur_fond_transparent_AG31.png"
          width="300px"
          height="228px"
        />
      </div>

Par ce que ce qui est Cézar dois revenir à Cézar, je me suis basé sur ce post et j'ai refait à ma sauce : Centering an image link with HTML and no CSS

cdt - fab

Inox: tu as essayer avec le code que je t'ai donné ?

@Inox: Oui, j'ai essayé avec le code que tu m'as donné.

L'image du logo "AGTherm" s'affiche bien, mais pas centrée:
https://nsm09.casimages.com/img/2022/04/26//22042603320126004717877803.jpg

@Fabber

Merci pour ton post.

Tu me dis:
"Ce que je comprend, c'est que tu veux modifier ton élément (img) sans toucher au css de GLPI."

En fait, ce n'est pas que je ne veux pas toucher au CSS de GLPI, c'est que je ne sais pas où il se trouve. :)

GLPI ne me propose que cette solution pour afficher mon logo:
https://www.casimages.com/i/22042502263326004717876463.jpg.html][IMG]https://nsm09.casimages.com/img/2022/04/25//mini_22042502263326004717876463.jpg

@Fabber:

Je veux bien essayer ton code, mais à quel endroit de mon propre code dois-je l'insérer ? :)

Hey, de rien pour le poste.

En effet c'est pas centré, je suspecte les balise du tableau :) .
Enfaite, dans le petit code, tu as des balise <table> et <tr>, peux tenter de les enlever ?
Voici la liste des balides : <table><tr> </tr></table>

PS : je viens de tester en local, avec les balises, ca cole le logo à gauche et pas au milieu ! :) Et il reste bien collé le bougre ! :)

cdt - fab

Désolé je viens de voir ton message, oui, le message met le dans le champ : Texte sur la page de connexion, et normalement ca marche ! :)

Est ce que ca a résolu ton problème ? :)