[Résolu] Centrer du float: left dans la page

Bonjour,

Après avoir recherché pas mal de temps, et m'être arraché quelques cheveux (déjà que j'en ai pas beaucoup), je m'en remets à vous ...

J'ai une fonction PHP qui génère un bouton. Ce bouton est composé de trois parties :
- Une partie gauche, contenant une image en background et une hauteur / largeur fixe
- Une partie centrale, contenant une image de fond d'une hauteur fixe et d'une largeur de 1px, en repeat: repeat-x et un texte par dessus
- Une partie de droite, idem à la partie de gauche

J'aimerais pouvoir centrer ce bouton sur la page ... Cependant, le float: left des images m'en empêche !

Voici le bout de code du bouton :

<div class="button_container">
	<div class="spacer">&nbsp;</div>
	<div class="button_left_off">&nbsp;</div>
	<div class="button_middle_off" onclick="[$action]" style="width: [$larg]px">[$text]</div>
	<div class="button_right_off">&nbsp;</div>
	<div class="spacer">&nbsp;</div>
</div>

$action correspond à l'action javascript associée au bouton.
$larg correspond à la largeur de la partie centrale du bouton.

Et voici le CSS correspondant :

.button_container
{
	text-align: center;
	border: 1px solid;
	margin: 0px auto;
}

.button_container .button_left_off
{
	background-image:url(../../images/button_left_off.gif);
	float: left;
	width: 8px;
	height: 30px;
	cursor: pointer;
	border: 1px solid;
}

.button_container .button_middle_off
{
	background-image:url(../../images/button_middle_off.gif);
	background-repeat: repeat-x;
	float: left;
	height: 30px;
	color: #363636;
	text-align: center;
	padding-top: 5px;
	font-family: tahoma;
	font-size: 13px;
	font-weight: bolder;
	cursor: pointer;
	border: 1px solid;
}


.button_container .button_right_off
{
	background-image:url(../../images/button_right_off.gif);
	float: left;
	width: 8px;
	height: 30px;
	cursor: pointer;
	border: 1px solid;
}

Quelques précisions :
- La balise parente du div button_container est le body
- Il y a des tableaux dans le body
- La taille du bouton peut changer (je fixe la taille dans ma fonction PHP)
- La fonction est destinée à être utilisée dans plusieurs cas de figures : la taille de la page peut varier.

J'ai essayé plusieurs choses :
- Les spacer en haut et bas avec clear: both;
- Les margin: 0px auto; (décale effectivement le bouton, mais d'environ 1/6 de la page)
- Le text-align: center dans le parent
- Ajouter le ".button_container" devant les ".button_left",".button_middle" et ".button_right"

Et j'en passe.

Les essais sont faits sur firefox 4.0 et IE8, résultat identique dans les deux cas.
Voici le résultat :


En vous remerciant !

EDIT : image jointe pour un effet visuel hors du commun. Les borders sont ajouté en guise de tests.
Modifié par Meyfarth (24 Mar 2011 - 14:33)

bonjour,

pour IE8 et les autres, il suffit de modifier le contexte de formatage de button_container en :
display:table; si seul sur sa ligne.
ou en inline-block, inline-table si a plusieurs sur la ligne avec le parent en text-align:center.

ex: http://gcyrillus.free.fr/essai/menu-centrer-differentes-technique.html
<edit>exemple avec element flottés plus bas et plus nombreux dans la page ..., oir le code source ou copier la page en local pour l'epuré des exemples inutiles </>

Dans les exemples tout est monté sur ul li a , en reprenant le principe en
div -> button-container -> elements en float , tu peut faire flotter des elements dans des conteneur centré en text-align:center. (voir CC pour IE7 et moins)

Cordialement
Modifié par gc-nomade (24 Mar 2011 - 13:16)

Bonjour GC,

Tout d'abord, merci !

Les exemples que tu m'as donné n'ont pas fonctionné en l'état, mais tu m'as donné une belle piste, et toute bête.
La seule différence qu'il y avait entre ton code et le mien, c'est le text-align du body.
En relisant ton message, j'ai ensuite vu :

a écrit :
div -> button-container -> elements en float , tu peut faire flotter des elements dans des conteneur centré en text-align:center.

Et là, j'ai eu un flash !

J'ai tout simplement ajouté un "<div style="text-align: center">[BOUTON]</div>" autour de ma fonction PHP qui génère mon bouton, et là, le miracle s'est produit !

EDIT : En fait, tes exemples m'ont bien aidé : j'ai également ajouté les display: inline-block (dans le container) et display: inline dans les 3 "sous-boutons"

GC pas trop comment te remercier, alors je fais hommage à ta signature !
Modifié par Meyfarth (24 Mar 2011 - 14:36)