[Résolu] "text-indent" sur une image se trouvant dans un texte

Bonjour,
Je cherche en vain une solution pour centrer en hauteur une image se trouvant dans un texte. Actuellement, elle est alignée en pied. Si quelqu'un peut m'aider, ce serait super.
Le code :

<h4>Textes provenant en partie d'une thèse (auteur inconnu) et d'un papier de Claude Speisser (59club.fr), le tout remanié par <a href="https://banana.fr/" target="_blank"><img class="banana" src="images/banana.png" alt="logo banana </a> pour le site.</h4>

Les CSS :

	.banana{height:1em; display : inline; object-fit: cover;	position: relative;
	-webkit-animation: logoAp 3s 1;
	-moz-animation: logoAp 3s 1;
	-ms-animation: logoAp 3s 1;
	-o-animation: logoAp 3s 1;
	animation: logoAp 3s 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;}	
	.banana:hover
{
	margin-top: 0%;
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	-o-transform: scale(2);
	transform: scale(2);
}

Bonne journée
P.

Hello,

Alors pour commencer, tu peux supprimer *toutes* les versions préfixées de tes propriétés, qui sont obsolètes depuis sans doute une 10aine d'année, ce qui raccourcira énormément ton code et le rendre beaucoup plus lisible.

Ensuite, ton image est contenue dans un lien : si tu essayes de centrer verticalement l'image, elle ne sera centrée que dans son parent lien. C'est sans doute le lien entier que tu veux centrer, non ?

En vrai j'ai du mal à concevoir ce que tu veux faire, tu pourrais l'illustrer ou envoyer un lien (Codepen) ?

Bonjour Raphael,
Merci pour ta réponse. J'ai bien entendu pour les les versions préfixées
Pour ce qui est de l'image dans le texte, je te joins une capture (lors du :hover).
Comment faire pour centrer tout ça en hauteur ?
Merci à toi et bonne journée,
P.
Modifié par PLGPPUR (19 Aug 2024 - 15:13)

OK, j'attends ta capture dans ce cas.

Désolé Raphael, elle n'était pas passée.
Bonne soirée

Ah oui. Si ton image doit apparaître sur une couche au-dessous du texte, il faudra passer par du positionnement absolu (alors pas directement sur l'image puisque je suppose qu'en pratique c'est le lien qui l'entoure qui doit être centré).

Autre piste élégante et sans positionnement absolu: Grid Layout en plaçant ton contenu et ton lien-image dans la même cellule, ils vont alors se superposer également et ce sera bien plus simple de tout aligner verticalement

Edit : par contre, tu cherches bien à centrer verticalement ? J'ai un doute car ça n'a rien à voir avec "text-indent" de ton titre.
Modifié par Raphael (20 Aug 2024 - 09:33)

Bonjour Raphael,
Merci pour ta réponse.
Oui, aucun rapport avec text-indent mais c'était pour faire comprendre le centrage vertical. Apparemment, ce n'est pas le cas
Donc, il faut créer une cellule ? Pour Grid Layout, je vais voir mais je gère très mal les grilles.
Merci encore,
P.

SUPER Raphael, merci beaucoup
Bonne soirée
P.

Raphael a écrit :

.container {
  display: grid;
  grid-template-areas: "cellule";
  place-items: center;
  
  & .contenu,
  & .lien-qui-contient-ton-image {
    grid-area: cellule;
  }
}

Et mais c'est pas mal ça, je n'y ai jamais pensé. Je trouve cela plus explicite qu'un `grid-area: 1/-1` sur les éléments enfants.