Centrage texte et photo dans cellules

Bonsoir

J'ai un souci sur la mise en forme d'une page sur mon site. Je souhaite faire en sorte que dans 2 cellules côte à côte (l'une comportant un texte et l'autre une image) le texte soit aligné verticalement.
J'ai mis le code suivant

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<table style="text-align: center;" border="0" width="100%" cellspacing="0" cellpadding="0"> <tbody><tr valign="middle"> <td rowspan="3" width="350">Cellule fusionnée</td> <td style="text-align: left;" valign="middle" width="500">Cellule 1</td> <td valign="middle" width="110"><img src="..." width="100" /></td> </tr> <tr valign="center"> <td style="text-align: left;" width="500">Cellule 2</td> <td width="110"><img src="..." width="100" /></td> </tr> <tr valign="center"> <td style="text-align: left;" width="500">Cellule 3</td> <td width="110"></td> </tr> </tbody> </table>

---

J'ai beau mettre des valign partout, le texte de la 2eme colonne n'est pas centrée verticalement !
Quelqu'un peut-il m'aider à résoudre ce problème ?
Merci par avance

Bonjour,

-> sujet déplacé dans le forum CSS.

Tu utilises des attributs OBSOLETES depuis le siècle dernier (valign,...).

1/ Je t'invite donc à mettre à jour tes connaissances sur les <table> :

• Les tableaux (XHTML & CSS)

2/ Par défaut, les éléments sont centrés verticalement ( vertical-align:middle;) dans les cellules.
Si ce n'est pas le cas, c'est qu'il doit y avoir une instruction vertical-align:top; quelque part dans le CSS existant.

Bonjour

Merci pour le lien que j'ai lu avec attention.

Citation:

---

Envoyé par jreaux62

2/ Par défaut, les éléments sont centrés verticalement ( vertical-align:middle;) dans les cellules.
Si ce n'est pas le cas, c'est qu'il doit y avoir une instruction vertical-align:top; quelque part dans le CSS existant.

---

Dans ce cas, comment je dois procéder pour changer les choses ? Je dois supprimer dans le CSS existant sur la page du site ?

Sans voir plus de code ou une page en ligne, difficile à dire... :koi:

Astuce :
Sur ton navigateur, tu peux afficher le code et inspecter les éléments :

• touche "F12" du clavier
• Ou "clic-droit" sur l'élément -> "Inspecter l'élément"

Regarde dans la colonne où s'affiche le CSS appliqué à l'élément, ainsi que le nom et la ligne du fichier CSS.

Bonjour,

Un code simple à titre d'exemple ( avec des dimensions aléatoires pour bien voir que l'alignement vertical est automatiquement effectué dans un <table>)

Code:

---

1 2 3 4 5 6

<table style="text-align:center;"> <tr> <td>ton texte</td> <td>ton image</td> </tr> </table>

---

CSS :

Code:

---

1 2 3 4 5

td{ border:1px solid silver; width:200px; height:100px; }

---

Le texte et l'image sont bien au centre de chaque <td>

La page en question est ici
L'inspection de l'élément fait apparaître

Code:

---

vertical-align: baseline;

---

dans style.css : 17
Effectivement quand dans l'analyseur je désélectionne, le texte est centré mais cette modification n'est que temporaire.
J'ai beau cherché dans mon style.css je ne vois pas cet élément d'alignement vertical.

Le fichier est là : /wp-content/themes/twentyeleven/style.css
à la ligne 17.

Oups ! Par contre, la règle s’applique à beaucoup de balises !

Il faut donc AJOUTER une règle spécifique pour tes tables :

Code:

---

1 2 3

table, tbody, tfoot, thead, tr, th, td { vertical-align: middle; /* ou top, c'est bien aussi ;) */ }

---

style.css est modifiable via ton Admin WP.

Merci beaucoup, tout fonctionne !