centrer verticalement une image

Invité · 14/03/2006, 13h15

Alors voilà.
J'aimerais que mon image soit centrée horizontalement et verticalement sur la page. J'ai fait un tableau mais apparemment le height="100%" ne marche pas. Quelqu'un peut m'aider ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<table border="0" width="100%" height="100%">
			<tr>
				<td align="center" valign="middle">
 
					<a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Entrer','','images/index2.gif',1)">
 
						<img src="images/index1.gif" alt="Entrer" name="Entrer" border="0" id="Entrer" />
 
					</a>
 
				</td>
			</tr>
		</table>

**ilood** · 14/03/2006, 15h39

Bonjour...

Si tu connais la taille de ton image, tu peux utiliser un poisitonnement à 50% du bord de ton conteneur et placer l'element au milieu grâce au marge négatives.

ex : avec une image de 352x500px

html

Code :

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

1
2
3
4
<body>
<a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Entrer','','images/index2.gif',1)"> 
<img src="mon_image.jpg" alt="Entrer" name="Entrer" width="352" height="500" border="0" id="Entrer" /></a>
</body>

css

Code :

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

1
2
3
4
5
6
7
8
9
10
a, img {
	display: block;
	position: absolute;
}
a {
	left: 50%;
	top: 50%;
	margin-top: -250px;
	margin-left: -176px;
}

**amika** · 14/03/2006, 16h02

ajoute width=100% et le height=100% dans le <TD>:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<table border="0" width="100%" height="100%"> 
         <tr> 
            <td width="100%" height="100%" align="center" valign="middle"> 
 
               <a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Entrer','','images/index2.gif',1)"> 
 
                  <img src="images/index1.gif" alt="Entrer" name="Entrer" border="0" id="Entrer" /> 
 
               </a> 
 
            </td> 
         </tr> 
      </table>

centrer verticalement une image

HTML

Discussions similaires

Partager

Partager