Centrer image dans page

Version imprimable

29/09/2012, 12h05
cris609

Centrer image dans page

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 ?
29/09/2012, 12h48
Invité

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 ?

Citation:

Envoyé par cris609

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

:koi: avec quoi travailles-tu ? (logiciel)

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:

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>

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

Code:

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>

01/10/2012, 02h00
cris609

il reste toujours en haut de page :calim2:

Et quelque chose comme ça ?

Code:

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>

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

Code:

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>

Citation:

Envoyé par cris609

il reste toujours en haut de page :calim2:

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

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>

01/10/2012, 20h11
Muchos

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.
01/10/2012, 22h40
cris609

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

En tout cas cela fonctionne parfaitement, merci à vous tous les gars :ccool: :lol: 8-)
01/10/2012, 22h52
NoSmoking

pour cela il existe GLOSSAIRE CSS.

PS: penses au bouton :resolu:
05/12/2012, 17h22
cris609

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

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 :aie:
05/12/2012, 19h59
NoSmoking

Tu n'as pas bien du lire le 1er lien que je t'ai mis sinon tu serais tombé sur :fleche: Propriétés de mise en forme d'arrière-plans