Centrer une image par rapport au texte

Par Babou, il y a 13 ans

Les bases HTML/CSS

Salut tout le monde,

Voilà je suis confronter à un problème pas très compliqué mais que je n'arrive pas à résoudre..
Je m'explique, j'ai ma phrase entre des balises paragraphe avec une petite image. Le soucis c'est que l'image dépasse plus en haut que en en bas ( par rapport à ma phrase ) et c'est vraiment pas esthétique, du coup j'aimerai qu'il y est autant de pixel en haut que en bas par rapport à ma phrase.

J'ai essayé plein de truc au niveau CSS (float, padding, margin,..) mais rien de concluant.
Si quelqu'un a une idée..

Voici mon code :

<p>C'est une image <img src="img/image.png"></p>

Exemple en image :

Désolé pour les trucs violets moches :p

Merci !

2 réponses

BenFarhat, il y a 13 ans

Essaie avec l'attribut css vertical-align

img {
  vertical-align:middle;
}

Si ca ne te convient pas tu as également la possibilité de donner des pourcentages (ou des tailles en pixels ou ems) pour la position 

img {
  vertical-align:10px;
}
// ou
img {
  vertical-align:-10px;
}
// ou encore
img {
  vertical-align:-50%;
}

ou alors jouer avec la position qui te permet de mettre ton image ou tu veuw 

img {
  position:relative;
  top:-10px;
  left:10px;
}

j'espère que cela résoudra ton soucis :)

PS: je ne connais pas la finalité de ton code mais tu as également la position de mettre cette image en fond et de choisir si elle se répète, si oui comment, etc etc..

Babou, il y a 13 ans

Merci ! C'est exactement ce qu'il me fallait :)

Je ne connaissais pas du tout cet attribut, à conseiller à ceux qui liront ce post !

Merci encore BenFarhat :D