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>

Centrer image dans page

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager