HTML TD Vertical Align
Résolu
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,
pourquoi ne pas mettre l'image dans un autre TD?
-
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-
-
@Herve_be
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/
-
