18041 sujets

Questions générales et questions de débutants

[RESOLU] Comment centrer des div qui sont en float

Bonjour à tous.

Je m'interroge depuis quelques temps au sujet d'un problème que je n'arrive pas à résoudre seul.

J'ai 3 div aligner sur la même ligne, qui forme une composition d'image qui servent à mettre en valeur des liens que je veux ajouter.

Pour aligner mes DIV j'ai utilisé la balise float...

J'ai essayer plusieurs méthode pour le contenu de la class "conteneur" mais rien à faire je n'arrive pas à centré exactement le tout, sachant que la longueur de cette composition change de largeur, donc je ne peu pas utilisé un pourcentage sur le margin-left par exemple, sinon les différents liens en place sur ma page finale ne seront pas aligné.

Je n'utilise pas une seule image en background pour que le texte que je met en hyperlien, ne dépasse pas de l'image qui serait fixe.

Qu'elle serait la solution s'il vous plait?
Modifié par Jolinary (30 Jan 2010 - 22:00)
Bonsoir, merci pour te réponse, oui j'en suis conscient, mais comment aligner mes trois div sur une même ligne sans ses float?

Merci d'avance.
Bonjour,

Une solution est de donner une largeur fixe au conteneur qui englobe le tout et de lui appliquer des marges auto à gauche et à droite.
paolo a écrit :
Bonjour,

Une solution est de donner une largeur fixe au conteneur qui englobe le tout et de lui appliquer des marges auto à gauche et à droite.
Bonsoir,

Le soucis c'est que selon le texte que je met en lien, la largeur diffère, donc je ne peu définir une largeur précise, si je met une largeur fixe qui soit plus large que la plus par de mes liens l'alignement, ne sera pas précis, entre tous les liens si il y en à une série Smiley decu

Je pense que la solution m'a était donnée, qui est de supprimé mes float, mais comment aligner mes div en les enlevant?

Merci.
Alors voici une petite technique sortie de derrière les fagot ^^, plus sérieusement je ne la connaissais pas jusqu'au week-end dernier.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page Vierge</title>
<meta name="description" content="Page vierge" />
<style type="text/css">

	.menu { display: table; margin: 0 auto; }
	.menu li { margin: 0; padding: 0; float: left; }
	
	/*	
		Ces deux lignes sont purement décoratives
	*/
	.menu ul { list-style: none; margin: 0; padding: 0; }
	.menu li a { display: block; padding: 5px 10px; margin: 0 1px; background: #CCC; color: #FFF; text-decoration: none; }
	
</style>
<!--[if lte IE 7]>
<style type="text/css">

	.menu { position: relative; text-align: center; }
	.center { text-align: left; display: inline; zoom: 1; }
	.center ul { position: relative; }
	
</style>
<![endif]-->
</head>
<body>
	<div class="menu">
		<div class="center">
			<ul>
				<li><a href="#">Bouton 1</a></li>
				<li><a href="#">Bouton 2</a></li>
				<li><a href="#">Bouton 3</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

Testé sous safari, firefox 2 et firefox 3.5 sur Mac OS X Leopard ainsi que sur Internet Explorer 6 et Internet Explorer 7 sur http://ipinfo.info/netrenderer/
Bonsoir, merci pour cette astuce, je n'ai pas eu le temps de l'essayer, mais à première vu ça correspond à ce que je désire, dés que j'ai tester je te tiens au courant, par avance je t'en remercie infiniment Smiley cligne

Je connaissais le système avec les balises LI, mais pas exactement comme cela Smiley smile
Modifié par Jolinary (21 Jan 2010 - 05:33)
Quelqu'un peut me dire pourquoi IE6 n'ccepte pas ça ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title><style type="text/css">
html, body { width:100%;
				margin:0;
				padding:0;
			}
div {	position:relative;
		width:20%;
		border:solid 1px blue;
		text-align:center;
		margin-left:40%; /* 50 - 1/2*width du div */
		float:left;
		}
</style>
</head>

<body>
<div>centrer</div>
</body>
</html>
SpaceFrog a écrit :
Quelqu'un peut me dire pourquoi IE6 n'ccepte pas ça ?

A partir du moment ou la largeur du bloc est fixée par la pein d'aller s'emmêler les pinceaux avec des techniques compliquées. (les marges auto ou le centrage via positionnement absolue peuvent convenir).

La technique la plus intéressante (assez peu connues encore) pour centrer un block (de rendu block et non inline) à largeur variable est celle proposée par Benjamin.
Modifié par Hermann (21 Jan 2010 - 14:00)
Tu appliques une marge à un élément du type bloc (div) en positionnement flottant. Dans ce cas de figure, IE 6 a tendance à doubler la marge. Un display: inline suffit à y remédier.
J'explore Hermann Smiley cligne

Merci V.B

Marrant ça que IE6 cumule quand c'est du block

Décidément IE6 déblock a plein tube ^^
Smiley wingol
je dirais même que le float ne sert a rien non plus .

div { 
        width:20%; 
        border:solid 1px blue; 
        text-align:center; 
        margin-left:40%; /* 50 - 1/2*width du div */ 
        }

suffit largement , enfin peut-être qu'un overflow:hidden; peut-etre nécessaire pur IE6 et maintenir la largeur a 20% ...

ah ,ce Ie6 Smiley smile

GC
Sujet clos
Aller à