HTML TD Vertical Align
Résolu
Utilisateur anonyme -
Bonjour
Avec ce script le texte est aligné verticalement : OK
<td nowrap style='vertical-align:middle;'>Texte</td>
En ajoutant une image le texte est aligné en bas : pourquoi ?
<td nowrap style='vertical-align:middle;'><img src='image'>Texte</td>
2 réponses
-
Bonjour,
Par défaut, une image est alignée sur la base de ligne du texte (vertical-align: baseline;), voir le premier exemple ici :
https://developer.mozilla.org/fr/docs/Web/CSS/vertical-align#exemplesIl faut appliquer un autre vertical-align: middle; sur l'élément img pour centrer l'image avec le texte.
Au passage, l'attribut html nowrap est déprécié, à la place il est recommandé d'utiliser la propriété css white-space avec la valeur nowrap :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement/noWrap
https://developer.mozilla.org/fr/docs/Web/CSS/white-space-
Merci, je pensais que Valign dans TD alignait tout ce qui se trouve dans le TD, bizarre qu'il faille aussi spécifier Valign dans IGM mais soit, ça fonctionne.
Il faut définir l'alignement de l'image par rapport au texte, peu importe que l'image et le texte soit dans une cellule avec un vertical-align ou non.
Ton vertical-align: middle; sur le td centre bien tout le contenu de la cellule mais il n'indique pas comment l'image doit être alignée par rapport au texte.
Si la cellule a une hauteur plus grande que l'image, tu peux voir via cet exemple que le contenu de la cellule est bien verticalement centré mais il faut tout de même spécifier l'alignement de l'image :
https://jsfiddle.net/tay8quLx/
-
-
