Discussion :

[michalyon]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[rodolphebrd]

Bonjour,

le tableau est-il nécessaire ?

[rodolphebrd]

Sans tableau :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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