Aligner images et textes

Version imprimable

Bonjour,
J'ai une question qui doit être d'une simplicité enfantine mais que je n'arrive pas à résoudre. J'aimerais aligner 3 images avec chacun son texte de façon verticale et horizontale.

J'y arrive avec un tableau :
Code:

1 2 3 4 5 6 7 8 9 <center> <table> <tr> <td align="center" valign="bottom"><img src="image1"><br>Texte1</td> <td align="center" valign="bottom"><img src="image2"><br>Texte2</td> <td align="center" valign="bottom"><img src="image3"><br>Texte3</td> </tr> </table> </center>
Maintenant, j'aimerais faire la même chose en CSS, mais je n'y arrive pas, et pourtant ça fait une heure que je jongle avec les div, span, vertical-align, bottom etc.

Merci de votre aide.

24/09/2013, 18h23
rodolphebrd

Bonjour,

le tableau est-il nécessaire ?

Sans tableau :

Code:

1
2
3
<figure><img src="http://lorempixel.com/sports/50/50"><figcaption>Texte1</figcaption></figure>
<figure><img src="http://lorempixel.com/cat/50/50"><figcaption>Texte1</figcaption></figure>
<figure><img src="http://lorempixel.com/50/50"><figcaption>Texte1</figcaption></figure>

Code:

1
2
3
4
5
6
7
8
9
10
figure{
  float: left;
  position: relative;
}
figcaption{
  -webkit-transform: rotate(90deg);
  position: absolute;
  left: 40px;
  top: 15px;
}

http://codepen.io/anon/pen/vsjzA