HTML TD Vertical Align
Résolu
Herve_be
Messages postés
1176
Statut
Membre
-
Utilisateur anonyme -
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>
A voir également:
- HTML TD Vertical Align
- Editeur html - Télécharger - HTML
- Powerpoint vertical - Guide
- Br html ✓ - Forum Webmastering
- Barre vertical mac ✓ - Forum MacOS
- Html br ✓ - Forum Webmastering
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#exemples
Il 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/