Centrer image dans page

**cris609** · 29/09/2012, 12h05

Bonjour à tous,
Je souhaiterai afficher un visuel centré verticalement et horizontalement sur une page web mais n'y parviens pas.
Je parviens à la centrer horizontalement sans problème (soit en la centrant avec l'outil texte, soit en ajoutant les marges 50% à gauche et à droite).
Cependant pour la verticalité, je bloque. Je me suis renseigné et il semble qu'il faille utiliser des CSS, mais voilà je suis une buse et même avec tutos et démo, je n'y parviens pas. (oui je suis un spécimen rare lol).
Est-ce que quelqu'un aurait un contenu tout prêt en CSS et HTML ?

Invité · 29/09/2012, 12h48

Bonjour,
- as-tu déjà du code à nous montrer ?
- ou au moins nous dire les dimensions de l'image ?
+ si elle est seule dans la page ou avec d'autres éléments ?

Envoyé par cris609

(soit en la centrant avec l'outil texte, soit en ajoutant les marges 50% à gauche et à droite)

avec quoi travailles-tu ? (logiciel)

**cris609** · 29/09/2012, 13h47

En fait je suis sous Dreamweaver CS3.
Pour l'image je pense que je tenterai de la redimensionner en % selon le format de l'utilisateur.

Pour le code :

Code html :

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
21
22
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#apDiv1 {
        position:absolute;
        width:100%;
        height:115px;
        z-index:1;
}
-->
</style>
</head>
 
<body>
<div id="apDiv1">
  <div align="center"><img src="Logo.png" width="391" height="369" align="middle" /></div>
</div>
</body>
</html>

**NoSmoking** · 29/09/2012, 16h14

Bonjour,
en jouant avec une line-height et une height ayant la même valeur

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
21
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Centrage Vertical</title>
<style>
div{
  line-height:200px;
  height:200px;
  background-color:#e0e0e0;
  border:1px solid #888;
  text-align:center;
}
</style>
</head>
<body>
<div>
 <img src="http://www.developpez.net/template/images/logo.png">
</div>
</body>
</html>

**cris609** · 01/10/2012, 02h00

il reste toujours en haut de page

**Muchos** · 01/10/2012, 15h43

Et quelque chose comme ça ?

Code html :

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
21
22
23
24
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centrage image</title>
<style type="text/css">
body {min-height: 100%; margin: 0;}
#apDiv1 {
        position: absolute;
        width: 100%;
        /* height: 115px; */
        text-align: center;
        top: 40%;
}
</style>
</head>
 
<body>
<div id="apDiv1">
	<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
</div>
</body>
</html>

Invité · 01/10/2012, 16h43

Bonjour,
avec les pseudo-table CSS (display:table; + display:table-cell; + vertical-align:middle; ) :

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
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Centrage Vertical</title>
<style>
*{ margin:0; padding:0; }
html, body{ width:100%; height:100%; }
#img-centree{
  display:table;
  height:100%;
  width:100%;
  text-align:center;
}
#img-centree div{
  display:table-cell;
  vertical-align:middle;
}
</style>
</head>
<body>
	<div id="img-centree">
		<div><img src="http://www.developpez.net/template/images/logo.png" alt=""/></div>
	</div>
</body>
</html>

**NoSmoking** · 01/10/2012, 17h47

Envoyé par cris609

il reste toujours en haut de page

j'ai oublié le principal, vertical-align:middle pour l'image qui par défaut est en baseline, toutes mes confuses

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
21
22
23
24
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Centrage Vertical</title>
<style>
div{
  line-height:200px;
  height:200px;
  background-color:#e0e0e0;
  border:1px solid #888;
  text-align:center;
}
div img{
  vertical-align:middle;
}
</style>
</head>
<body>
<div>
 Texte avant<img src="http://www.developpez.net/template/images/logo.png">texte après
</div>
</body>
</html>

**Muchos** · 01/10/2012, 20h11

La proposition de NoSmoking est simple et légère pour centrer dans la <div>. Pour centrer dans la page, la seule est pour l'instant celle de jreaux62.

On remarque à quel point le centrage horizontal est simple, mais le vertical est par essence complexe.

**cris609** · 01/10/2012, 22h40

A quoi correspondent les CSS (display:table; + display:table-cell; + vertical-align:middle; ) ?

En tout cas cela fonctionne parfaitement, merci à vous tous les gars

**NoSmoking** · 01/10/2012, 22h52

pour cela il existe GLOSSAIRE CSS.

PS: penses au bouton

**cris609** · 05/12/2012, 17h22

J'avance dans la création de mon site (je vous ferai voir le résultat final

)

J'ai un bloc blanc de 750 pixels centré sur la page, comme je le souhaite. Je souhaite maintenant mettre un fond derrière tout cela. Fond qui dépassera bien sur sur les côtés et qui sera plus ou moins visible selon la résolution et la taille de le fenêtre de l'utilisateur. J'ai découvert que l'on peut répéter une image sur -x ou sur -x.
- est-il possible d'étirer (et non répéter) une image background sur la totalité de la page web (donc ajustable si l'utilisateur agrandit ou réduit la fenêtre
- est-il possible de centrer une image background ? (exemple http://www.psg.fr/fr/Actus/003001/Ar...-la-solidarite

Merci à vous

**NoSmoking** · 05/12/2012, 19h59

Tu n'as pas bien du lire le 1er lien que je t'ai mis sinon tu serais tombé sur

Propriétés de mise en forme d'arrière-plans

Centrer image dans page

Centrer un élément en CSS

Discussions similaires

Partager

Partager