28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de centrage dans un DIV

Bonsoir,

J'ai depuis une semaine un problème de mise en forme. J'ai cherché partout sur ce forum et je n'ai rien trouvé.

Je veux réaliser une gallerie d'images (avec des dl, dt, dd) contenues à l'intérieur d"un DIV.
J'aimerais que les images soient centrées à l'intérieur du DIV et je n'y arrive pas.

Pour réaliser ma gallerie, j'ai suivi le conseils sur un site et donc d'utiliser des dl, dt, dd en FLOAT:LEFT (Je veux 3 images par colonne).

Voici mon premier résultat : http://www.benfica-story.com/pb

(la partie en jaune sert uniquement à bien visualiser les DIVs.

Contrairement à ce qu'on pourrait penser, mes images ne sont pas centrées dans le DIV, en fait j'ai choisi une largeur du DIV de façon à tomber pile poile. Mais ça ne m'arrange pas. En plus avec Mozilla, les images sont légèrement décalées à gauche, pourtant j'ai tout regardé.

Questions :
- Comment centrer des dl, dt, dd en FLOAT:LEFT à l'intérieur d'un DIV ?
- Est-ce la bonne méthode ?

Merci

Code :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sobrainho dos Gaios</title>
</head>
<style title="sdg" media="all" type="text/css">
html, body {
	margin:0;
	padding:0;
	height:100%;
	background-color:#335577;
	text-align:center;
}
#contenu {
	width:556px;
	background-color:#d3d3d3;
	padding:10px;
	margin-left:auto;
	margin-right:auto;
	height:80%;
	text-align:left;
}
#entete {
	width:556px;
	background-color:#d3d3d3;
	padding:10px;
	margin:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 20px;
}
#menus {
	width:556px;
	background-color:#787878;
	margin:auto;
	padding:0;
}
#centre {
	width:556px;
	background-color:#FFCC33;
	margin-left:auto;
	margin-right:auto;
	text-align:justify;
	padding:0;
	height:100%;
}
#pied {
	width:556px;
	background-color:#d3d3d3;
	padding:10px;
	margin:auto;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:10px;
}
h1 {text-align:center;}
dl.gallerie {
	background-color: #BEBEBE;
	text-align:center;
	padding:6px;
	float:left;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:10px;
}
.gallerie dt {
	font-weight:bold;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
.gallerie dt img {
	width:160px;
	height:110px;
}
.gallerie dd {
	margin:0;
	padding:0;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

</style>
<body>
<div id="entete">Sobrainho dos Gaios</div>
<div id="contenu">
	<div id="menus">Barre de Menus</div>
	<div id="centre">
		<dl class="gallerie">
			<dt><img src="images/v1.jpg" /></dt>
			<dt>Rancho folclorico</dt>
			<dd>Cernache Bonjardim</dd>
		</dl>
		<dl class="gallerie">
			<dt><img src="images/v2.jpg" /></dt>
			<dt>Rancho folclorico</dt>
			<dd>Cernache Bonjardim</dd>
		</dl>
		<dl class="gallerie">
			<dt><img src="images/v3.jpg" /></dt>
			<dt>Rancho folclorico</dt>
			<dd>Cernache Bonjardim</dd>
		</dl>
		<dl class="gallerie">
			<dt><img src="images/v4.jpg" /></dt>
			<dt>Rancho folclorico</dt>
			<dd>Cernache Bonjardim</dd>
		</dl>
		<dl class="gallerie">
			<dt><img src="images/v5.jpg" /></dt>
			<dt>Rancho folclorico</dt>
			<dd>Cernache Bonjardim</dd>
		</dl>
		<dl class="gallerie">
			<dt><img src="images/v6.jpg" /></dt>
			<dt>Rancho folclorico</dt>
			<dd>Cernache Bonjardim</dd>
		</dl>
		<dl class="gallerie">
			<dt><img src="images/v7.jpg" /></dt>
			<dt>Rancho folclorico</dt>
			<dd>Cernache Bonjardim</dd>
		</dl>
		<dl class="gallerie">
			<dt><img src="images/v8.jpg" /></dt>
			<dt>Rancho folclorico</dt>
			<dd>Cernache Bonjardim</dd>
		</dl>
		<dl class="gallerie">
			<dt><img src="images/v9.jpg" /></dt>
			<dt>Rancho folclorico</dt>
			<dd>Cernache Bonjardim</dd>
		</dl>
		<dl class="gallerie">
			<dt><img src="images/v10.jpg" /></dt>
			<dt>Rancho folclorico</dt>
			<dd>Cernache Bonjardim</dd>
		</dl>
		<dl class="gallerie">
			<dt><img src="images/v11.jpg" /></dt>
			<dt>Rancho folclorico</dt>
			<dd>Cernache Bonjardim</dd>
		</dl>
		<dl class="gallerie">
			<dt><img src="images/v12.jpg" /></dt>
			<dt>Rancho folclorico</dt>
			<dd>Cernache Bonjardim</dd>
		</dl>
	</div>
</div>
<div id="pied">
	 www.sobrainho-dos-gaios.com
 
</div>
</body>
</html>

Modifié par Luis (29 Sep 2005 - 21:34)
Bonjour.
Il est logiquement impossible de concilier alignement centré et float:left;
Tout ce que tu peux faire c'est jouer sur le margin pour essayer d'avoir un alignement qui potable qui laisse croire que c'est centré.
Peut-etre que certains te trouveront une solution , c'est ce que je te souhaite en tous cas
Bonjour,

Ok, si j'ai bien compris, les FLOATS ne peuvent pas être centrés (ce qui est un peu près logique en même temps Smiley rolleyes )

D'après vous, lorsqu'on connaît le nombre de FLOATS à afficher par colonne (c'est mon cas ---> 3 blocs), la méthode est jouer sur le margin pour avoir un semblant de "centré".

Je suis d'accord, d'ailleurs c'est ce que j'ai fait.

Le problème est que ça fonctionne bien sous IE mais pas sous Mozilla.
Si vous ouvrez le lien http://www.benfica-story.com/pb vous remarquerez que les images (balises dd en FLOATS) sont décalées vers la gauche.

J'ai tout tenté mais ça ne change rien.

Avez-vous une idée du problème et comment le corriger ?

Merci beaucoup pour vos réponses.

Luis
Sujet clos
Aller à