problème d'alignement en css

christiantiani
Les bases HTML/CSS

Bonjour a tous,

Ce que je veux

je voudrai aligner deux images sur l'horizontal

Entou

<div class="content2">

             <img src="images/avant.jpg" alt="BEX" class="Bex_1">
             <img src="images/apres.jpg" alt="AEX" class="Aex_1">

</div>

.Bex_1{
    width: 483px;
    height: 283px;
    display:block;
    float: left;
    margin: 50px 10px 50px 20px;

}

}
.Aex_1{
    width: 483px;
    height: 283px;
    display:block;
    float:right;
    margin: 50px 50px 50px 10px;
   }
![]()


rez votre code pour bien le mettre en forme

Ce que je veux

je souhaiterai aligné ses deux images sur l'horizontal avec une mage à egal à gauche et à droite
et un espacement de 10px entre les deux.

Ce que j'obtiens

les deux images restent à gauche avec une marge à droite dans l'inpecteur de code je n'arrive pas à voir
le code css.

10 réponses

SLK

Salut,

attention ça ne va pas du tout !

Tu veux aligner 2 éléments horizontalement mais tu les mets en block, ce n'est pas possible !
Et un block ne float pas.

Une solution possible :

<div class="images-container">
    <img src="#">
    <img src="#">
</div>
.images-container {
    text-align: center; /* fonctionne sur les "display: inline-block" (ce qu'ont les élément "img" par défaut) */
}

.images-container img {
    width: 483px;
    height: 283px;
    margin: 0 5px; /* 5px de marges sur les côtés (les img seront donc séparées de 10px) */
}
saibe

bon, i répond pas mais c po grave :
la solution est dans les display : flex....

cytheria

@saibe : il n'y a pas que le flex pour régler ce genre de problème ;) Avant, on arrivait bien à faire sans.

saibe

@cytheria : oui en effet ; mais je fais de la propagande :)
histoire que ça devienne un vrai standard ;)
j'avais ajouter ça, parce que ct un post mort, merci de l'avoir réactivé ;)

SLK

J'ai lu dans flex-magazine que les gens qui utilisent le flex vivent en moyenne 3 ans de plus.

cytheria

@saibe : j'entends bien, je te rassure je suis pareille :p Mais il faut voir en fonction de ses besoins (si ça doit être compatible IE8 par exemple :p)

alfredpiterson

Bonjour,
Ma question est comment réduire le pourcentage pagepseed de mon site abdominoplastie pas cher : le problème est lié à la taille des images. MERCI

saibe

@alfredpiterson, il est préférable d'ouvrir un nouveau post....
cela dit regarde peut-être ici ou là

saibe

@cytheria, :) alors un display : table-cell peut-être ?

cela dit je viens de relire ce post :

@christiantiani, peu importe le ratio, tes images ont toutes le même format ? -> use *slk solution.

@slk, je pige pas ta réponse. un 'block' est dans le flux il peut tout à fait être floater ssi on lui met un width. non ?

pour un bon display

SLK

@saibe,
Ah effectivement tu as raison.

Je pensais que si on mettait un width: 200px à un block, et un background-color: yellow par exemple,
on ne verrai du jaune QUE sur 200 px, MAIS que le block dans le fond prenait toujours TOUTE la largeur de l'élément parent,
et qu'un float n'y changerait rien.

Je me suis bien trompé.

Apparemment avec cet exemple très simple,
"LA SUITE" va "remonter" dès qu'on met un float sur "BLOCK"

<div class="test">
    BLOCK
</div>

<div>
    LA SUITE
</div>
.test {
    background-color: yellow;
    float: right;
}

Et en plus, et ça vraiment je ne m'y attendais pas du tout,
juste avec le float (même pas de width), le fond jaune ne prend plus que la largeur du mot "BLOCK".
Et il float bien à droite, en sortant du flux, et laissant "LA SUITE" remonter.

Zut alors, j'étais convaincu que ça ne fonctionnait pas comme ça xD

Du coup désolé j'ai dis n'importe quoi plus haut...
Merci d'avoir rectifié, ça m'aide aussi ^^