[Résolu] Float et margin: 0 auto, un amour impossible ?

Bonjour à tou(te)s !

Je suis désespérément à la recherche d'une méthode afin d'aligner des images dans une div et que ces dernières restent centrées et cela, indépendamment du nombre d'image qui s'affichera.

exemple en photo :



et le CSS :

.header { 
               width:950px; 
               margin:0 auto; 
               margin-top:80px; 
               border:1px solid red;
                height:120px;}

.header .rubriques {
                   margin:0 auto;
                   padding-left:30px; 
float: left; --> si mit le centrage ne s'effectue pas, les images sortent du flux... 
                    border:1px solid blue; 
                    width:90px; } 

Comment faire en sorte que les img restent en float tout en étant centré à leur div parent ??
En vous remerciant
Modifié par bga_O (21 Dec 2014 - 08:39)

bonjour,

fait voir ton code HTML stp.
Modifié par stephweb (21 Dec 2014 - 09:30)

Salut,

merci pour ta réponse !

<div class="header">
	
			<div class="rubriques">
				<a href="toto" rel="bookmark">
				<div class="titreRubHeader">toto</div>
				</a>
				<div class="imgRubHeader">toto</div>
			</div>
	
</div>

J'avais essayé de mettre des span dans une <p> en dernier ressort... mais rien

merci à toi !

Pour le centrage horizontale, perso je préfere "display:inline-block" que "float".

.header { 
    width:950px; 
    margin:0 auto; 
    margin-top:80px; 
    border:1px solid red;
    height:120px;
    text-align:center; /* Pour centréer les élément en ligne (et block) */
}

.header .rubriques {
    margin:0 auto;
    padding-left:30px; 
    width:280px;
    display:inline-block; /* Pour qu'elles puissent être centrées */
    vertical-align:top; /* Pour éviter l'alignement Bas qui est par défaut avec les inline-block.*/
}

j'imagine que tu veux faire un truc comme ceci (aligner 3 éléments dans un bloc)

<div class="header">
	
    <div class="rubriques">
        élément 1 avec image
    </div><!-- no space
    --><div class="rubriques">
        élément 2 avec image
    </div><!-- no space
    --><div class="rubriques">
       élément 3 avec image
    </div>

</div>

Tiens moi au courant ci ça marche, (je débute moi aussi donc des fois je me trompe).

ps:si je rajoute ceci entre chaque éléments HTML centrés: <!-- no space -->
C'est pour éviter les espaces indésirables qu'il y a avec inline-block
Modifié par stephweb (21 Dec 2014 - 10:12)

Excellentissime !
Pile poil ^^

Un grand bravo !! un grand merci aussi !
Voilà quelque temps que je me galérais à rechercher la solution.

Merci et dde très bonnes fêtes

PS : je n'ai pas eu le besoin de retoucher au code html.
PS : je ne connaissais pas le critère inline-block de display, extrêmement pratique !
Modifié par bga_O (21 Dec 2014 - 14:07)