Centrer images dans un div

**Leeloe** · 16/02/2009, 10h20

Bonjour,

Je n'arrive pas à faire que les images insérées dans une div soient centrées, alors que pas de problème pour le texte.

Voila un bout de mon CSS:

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
div#contenu_droite {
	width:18.09%;
	height:75.64%;
	background-image: url("images/09.jpg");
	float:left;
	overflow:auto; 
	}
h6.titre{
	font-family:Trebuchet ms;
	font-size:80%;
	color: #9A5E31;
	text-align:center;
}
h6.info{
	font-family:MS Trebuchet;
	font-size:80%;
	color:#046380;
	background-color:transparent;
	text-align:center;
}

Et en HTML:

Code :

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

1
2
3
4
5
6
 
<h6 class="titre">UN INTRANET DE</h6>
<img src="images/separe.jpg">
<img src="images/media3.gif"><br/><br/>
<h6 class="titre">CAC</h6><br/>
<img src="images/separe.jpg"><br/>

Donc mes écritures sont centrées mais pas mes images. Comment y remédier?

Leeloe

**Erwan31** · 16/02/2009, 11h55

Bonjour,
tes images ressemble à des images décoratives, a priori il serait préférable de les insérer via un fond CSS.
Exemple:

Code :

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

1
2
3
4
h6 {
background: url(../images/separe.jpg) no-repeat center bottom; 
padding-bottom: .5em
}

pour info .5em = 0.5em

**Leeloe** · 16/02/2009, 13h45

Les images sont principalement des séparateurs, ou des logos divers illustrant un titre. Le site est dynamique et on doit pouvoir changer l'ordre des éléments. Je peux donc pas les mettre en background.

**GihefBey** · 16/02/2009, 15h23

Bonjour,

Ça n'apparaît pas dans ce que tu donnes, mais il probable que tout ça est contenu dans le #contenu_droite.
Dans ce cas, ajoute-lui un text-align: center;
Sinon, place les images dans des <p> auxquels tu appliqueras le centrage.

-

**Leeloe** · 16/02/2009, 15h51

Le text-align: center; ne marche pas.
Et mes balises <p> sont déjà utilisées.

**GihefBey** · 16/02/2009, 16h13

C'est que tu ne nous dis pas tout.

Test ?

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #cd853f;
      color : #344979;
      }
    .contenu_droite {
      position: relative;
      float:left;
      overflow:auto; 
      margin: 16px;
      width:48.09%;
      height:75.64%;
      text-align: left;        /* c'est aligné à gauche */
      border : 1px solid #fff;
      background-color: #ffd;
      font-family: 'Trebuchet MS', Verdana, sans-serif;
      }
    .separ {
      clear : left;
      }
    p {
      margin : 1em;
      }
    </style>
</head>
<body>
  <div class="contenu_droite" style="text-align: center;">    <!-- c'est modifié au centre -->
    <img src="http://www.developpez.net/forums/avatars/95143-gihefbey.gif?dateline=1226966410" alt="test" />
  </div>
  <div class="separ"></div>
  <div class="contenu_droite">        <!-- ce n'est pas modifié -->
    <p style="text-align: center;">   <!-- c'est modifié au centre -->
      <img src="http://www.developpez.net/forums/avatars/95143-gihefbey.gif?dateline=1226966410" alt="test" />
    </p>
  </div>
  <div class="separ"></div>
</body>
</html>

-

**desert** · 16/02/2009, 16h22

Ceci peut-être ?

Code css :

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

1
2
3
4
div#contenu_droite img {
    display: block;
    margin: 0 auto;
}

**Leeloe** · 18/02/2009, 10h14

Merci, ceci marche nikel:

Code :

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

1
2
3
4
5
 
div#contenu_droite img {
    display: block;
    margin: 0 auto;
}

Encore merci tous!

Leeloe

Centrer images dans un div

Centrer un élément en CSS

Discussions similaires

Partager

Partager