Centrer l'affichage d'un élément

**nico1492** · 06/09/2010, 22h03

Bonjour,

J'ai conscience que ma question peut paraitre simpliste mais...

J'essaie de placer un composant (image, texte, tableau...) en plein centre de l'écran/de l'affichage, mais je n'ai pas trouvé après pas mal de recherche, quelque chose de satisfaisant.

J'ai bien essayé avec des balises HTML simples :

Code :

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

1
2
3
4
5
<table height="100%" width="100%">
<tr>
 <td valign="middle" align="center"><img src="./img/gazon.jpg" border="0" /></td>
 </tr>
</table>

Et encore, ça n'est que mon dernier essai...

Y'a-t-il un moyen de centrer à l'écran un élément quelque soit la résolution du client qui l'ouvre ?

Merci pour vos réponses !

**coeos.pro** · 06/09/2010, 22h47

Bonjour, pour centrer horizontalement il faut mettre width et margin-left:auto; et margin-right:auto;
Pour centrer horizontalement et verticalement le bloc id="bloc_a_centrer", il faut mettre :

Code css :

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

1
2
3
4
5
6
7
8
9
10
 
#bloc_a_centrer{
position:absolute; 
  left: 50%;  
  top: 50%; 
  height: 600px; 
  width: 800px; 
  margin-top: -300px; /* moitié de la hauteur */ 
  margin-left: -400px;/* moitié de la largeur */ 
}

**julienlacorne** · 13/09/2010, 16h18

Bonjour, il faut tout d'abord dimensionner la table, ensuite tu applique la propriétée "display: block;" à la balise img pour que celle-ci prenne toute la largeur, ensuite tu lui applique "margin: auto;", il calculera lui meme pour appliquer les meme marges à gauche et à droite

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<html>
<head>
 
<style type="text/css">
  table { width: 100%; }
  td img { display: block; margin: auto; }
</style>
 
</head>
<body>
 
<table>
  <tr>
    <td><img src="gazon.jpg" /></td>
  </tr>
</table>
 
</body>
</html>

Sinon, un petit conseil, utilise du css, c'est beaucoup plus flexible que les mises en forme intrusives dans le html, si tu ne connais pas tu trouvera un grande quantité de tuto sur la toile... bon courage

Centrer l'affichage d'un élément

HTML

Vue hybride

Discussions similaires

Partager

Partager