28172 sujets

CSS et mise en forme, CSS3

[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 Smiley cligne
P.
Administrateur
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 Smiley cligne
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)
Administrateur
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é).
Administrateur
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 Smiley cligne
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.
Administrateur
PLGPPUR a écrit :
Oui, aucun rapport avec text-indent mais c'était pour faire comprendre le centrage vertical. Apparemment, ce n'est pas le cas Smiley cligne

Oui parce que text-indent… est horizontal Smiley langue


PLGPPUR a écrit :
Donc, il faut créer une cellule ? Pour Grid Layout, je vais voir mais je gère très mal les grilles.

Oui il y a plusieurs manières de procéder. Personnellement j'ai un faible pour les "Grid Areas", ce qui donnerait ceci :

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


Et avec la démo codepen qui va bien : https://codepen.io/raphaelgoetter/pen/ZEdxYZx?editors=1100

À toi d'adapter !
Modifié par Raphael (20 Aug 2024 - 18:25)
Meilleure solution
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.
Prévenir un modérateur
Répondre au sujet
Aller à