Bonjour,
Si tu ne veux pas te casser la tête, opte pour un tableau.
Mais emploie “valign” à bon escient.
Comme dans cet exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Alignement vertical par un tableau</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
text-align: center;
background-color: #b0c4de;
}
#conteneur {
position: relative;
margin: 0 auto;
width: 760px;
border : 2px solid #fff;
background-color: #f0ffff;
font-family: Tahoma, 'Trebuchet MS', Verdana, Optima, Papyrus, sans-serif;
}
table {
width : 100%;
}
td {
text-align: center;
color : #b0c4de;
height : 200px;
border : 1px dashed #858;
}
p {
margin : 2em 0 0 0;
}
</style>
</head>
<body>
<div id="conteneur">
<table>
<tr>
<td colspan="2" style="height:auto; border:0;">
<p>&lt;td valign="middle"></p>
</td>
</tr>
<tr>
<td valign="middle">
<img src="Image1.png" alt="Image1" width="193" height="127" />
</td>
<td valign="middle">
<img src="Image2.png" alt="Image2" width="192" height="271" />
</td>
</tr>
<tr>
<td colspan="2" style="height:auto; border:0;">
<p>&lt;td valign="top"></p>
</td>
</tr>
<tr>
<td valign="top">
<img src="Image1.png" alt="Image1" width="193" height="127" />
</td>
<td valign="top">
<img src="Image2.png" alt="Image2" width="192" height="271" />
</td>
</tr>
<tr>
<td colspan="2" style="height:auto; border:0;">
<p>&lt;td valign="bottom"></p>
</td>
</tr>
<tr>
<td valign="bottom">
<img src="Image1.png" alt="Image1" width="193" height="127" />
</td>
<td valign="bottom">
<img src="Image2.png" alt="Image2" width="192" height="271" />
</td>
</tr>
</table>
</div>
</body>
</html>À toi de créer 2 images pour le tester.
--
Alignement des planetes
