Centrer verticalement Image+texte dans un <td>

[lolymeupy]

Bonjour,
dans un BO, je dois afficher un tableau avec pas mal de données, et notamment une colonne dans laquelle j'insère un <img src...> suivi d'un texte ( il est d'ailleurs possible qu'il y ait plusieurs [ <img src...>+texte ] par cellule, et dans ce cas là j'insère un <br /> pour les mettre sur des lignes différentes dans ce <td<)

Et donc, mon problème est de pouvoir centrer verticalement dans la cellule les images et le texte.
Les images sont centrées verticalement, mais les textes se retrouvent à droite des images (ça c'est ok) mais au niveau du bas de l'image. Et j'aimerai que les textes soient au niveau du milieu de l'image (cad au milieu de la cellule)...

J'ai essayé avec valign="middle"...mais sans succès.

Merci de votre aide

[Bisûnûrs]

J'ai pas compris.

[lolymeupy]

Yep, je comprends
Je vais essayer d'être plus clair (ce qui ne sera pas difficile) :
en gros, j'ai un tableau avec des cellules comme celle-ci :

Code :

1
2
3
4
5
 
<td>
<img src="../img/tmp/img_produit1.jpg">Nom produit1<br>
<img src="../img/tmp/img_produit2.jpg">Nom produit2
</td>

et il faudrait que les images et le texte à la droite de ces images soient alignés verticalement.
Le problème c'est que les images le sont (parce que la cellule prend la taille des 2 images je pense), mais les textes se situent en bas à droite de chaque image.

[Bisûnûrs]

D'accord, donc quand tu dis verticalement, en fait c'est horizontalement.

[jreaux62]

Bonjour,
tu as ca :

Code :

1
2
3
4
5
6
|------|
|image1|
|------| texte1
|------|
|image2|
|------| texte2

et tu veux ca :

Code :

1
2
3
4
5
6
|------|
|image1| texte1
|------|
|------|
|image2| texte2
|------|

Ce n'est pas si simple ...

1/ La solution la plus simple (bien que la moins recommandable) : utiliser des <table> :

Code html :

1
2
3
4
5
6
7
8
9
10
11
<td>
	<table>
	<tr>
		<td><img src=".../image1.jpg" alt="image1" /></td>
		<td>texte1</td>
	</tr><tr>
		<td><img src=".../image2.jpg" alt="image2" /></td>
		<td>texte2</td>
	</tr>
	</table>
</td>

2/ utiliser des div + css
Pour ca, Bisûnûrs est l'"homme fort".

[lolymeupy]

Merci beaucoup Jreaux, c'est exactement ça que je veux (Bisûnûrs : un schéma aurait effectivement été plus clair dsl...)
Comme c'est au niveau du BO du site, l'utilisation de tableaux n'est pas (trop) un problème. Je vais essayer ça et je fais le retour ensuite.
Merci encore

[Bisûnûrs]

Ouais, ou alors un simple vertical-align:middle en CSS sur l'image fonctionne aussi.

[lolymeupy]

C'est nickel.
Merci beaucoup jreaux
(Bisûnûrs : Je vais également tester ta solution. Si ça marche, ça m'évitera d'utiliser "la moins recommandable". Merci).

[jreaux62]

"Chat échaudé craint l'eau froide" (je ne propose plus rien sans avoir testé avant)

DONC : solution de Bisunurs OK (évidemment)

Code :

1
2
	<img src=".../image1.jpg" alt="image1" style="vertical-align:middle;"/> texte1<br />
	<img src=".../image2.jpg" alt="image2" style="vertical-align:middle;"/> texte2<br />

[lolymeupy]

Effectivement, j'ai finalement pris cette autre solution, et elle marche tout aussi bien (en + propre donc ).
Par contre, j'ai un souci avec la colonne suivante, qui elle ne contient pas d'image, mais le nombre de produits correspondant à la colonne précédente (dans cet exemple : quantité = 1 pour le produit1 et également pour le produit 2).

Comme il n'y pas ici de balise <img...> j'ai ajouté des <div> dans les <td> concernés :

Code :

1
2
3
4
5
 
<td bgcolor="#fffff0" style="border: solid 1px #f5e9cf; border-right:solid 2px #ada490; padding: 3px; white-space: nowrap">
<div style="vertical-align:middle">1</div><br>
<div style="vertical-align:middle">1</div>
</td>

et voilà ce que j'obtiens :
Un petit schéma

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
|------|
|------| 
|image1| produit1
|------|               1
|------|                 
|------| 
|------|                 
|------|               1
|image2| produit2
|------|
|------|

En fait, les <div> ne prennent pas la hauteur totale du <td> dans lequel elles sont.
Est-ce que possible de forcer cela ?
(s'il y a un seul <div> : 100% de la hauteur de la cellule, si 2 <div> (comme dans cet exemple) : chaque <div> occupe 50% de la hauteur de la cellule, etc...)

Merci encore

[lolymeupy]

Je viens de voir un exemple où l'on parle de mettre le "contenant" et le "contenu" à 100% tous les 2. j'ai donc essayé ça, mais le résultat est le même :

Code :

1
2
3
4
5
 
<td bgcolor="#fffff0" style="border: solid 1px #f5e9cf; border-right:solid 2px #ada490; padding: 3px; white-space: nowrap;height:100%">
<div height="100%">1</div><br>
<div height="100%">1</div>
</td>

[lolymeupy]

J'ai finalement remplacé le <div> par <p> (car j'ai vu que les DIV prennent les dimensions qui leurs sont nécessaires, sans plus).

Code :

1
2
3
4
5
6
7
8
 
<td bgcolor="#fffff0" style="border: solid 1px #f5e9cf; border-right:solid 2px #ada490; padding: 3px; white-space: nowrap;height:100%">
<p style="min-height:100%;">1</p><br>
<p style="min-height:100%;">2</p><br>
<p style="min-height:100%;">1</p><br>
<p style="min-height:100%;">1</p><br>
<p style="min-height:100%;">1</p>
</td>

C'est beaucoup mieux, mais ce n'est pas encore ça. Les <p> ne prennent pas toutes la hauteur, et lorsque j'ai plus de lignes (comme ici : 5) le décalage est de plus en plus important, surtout pour les 1ères et dernières lignes car les <p> sont "centrés" vers le milieu de la cellule.

[NoSmoking]

Bonjour,

Envoyé par lolymeupy

Par contre, j'ai un souci avec la colonne suivante, qui elle ne contient pas d'image, mais le nombre de produits correspondant à la colonne précédente (dans cet exemple : quantité = 1 pour le produit1 et également pour le produit 2).

on est donc en présence de données tabulaires, 1 image -> 1 produit -> 1 quantité, dans ce cas pourquoi ne pas créer une ligne par "image"

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table>
  <tr>
    <th>image</th>
    <th>produit</th>
    <th>nombre</th>
  <tr>
    <td><img src=".../image1.jpg" alt="image1"></td>
    <td>produit #1</td>
    <td>nombre #1</td>
  <tr>
  <tr>
    <td><img src=".../image2.jpg" alt="image2"</td>
    <td>produit #2</td>
    <td>nombre #2</td>
  <tr>
</table>