Float or not Float

Bonjour,

( Débutant inside )
Dans une Div, je veux mettre 3 photos en ligne, donc je me suis dit que float: left devrait marcher, avec une marge auto pour centre.
Et bien rien à faire ...
Mes images sortent du flux ! et ce n'est pas centré !
voici mon bout de code css

 <div class="portfolio">
          <p>Quelques photos de mariages.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad ea autem cupiditate exercitationem magnam, ut perferendis asperiores tempore natus deserunt sunt dolore placeat, aspernatur dicta sit ratione, a quod expedita.</p>
          <img src="http://placekitten.com/200/150" alt="">
          <img src="http://placekitten.com/200/150" alt="">
          <img src="http://placekitten.com/200/150" alt="">
        </div>

et mon Css

.portfolio{
    background: #8d8367 ;
}
.portfolio img{
    margin: 25px auto;
    float: left;
    }
.portfolio p{
    margin-top: 15px;
    text-align: center;}

Ça va peut être vous faire sourire...
Si quelqu'un peut m'aider ...
Merci d'avance.
Guillaume
Modifié par gillaume (29 Jun 2020 - 11:30)

Hello

Comme le nom le laisse croire, "float: left" n'est carrément pas prévu pour centrer des éléments.
Et comme tu le dis, float sort les éléments du flux, ce qui ne facilite pas les choses.

Le plus simple est de :
- laisser les images faire leur vie (elles sont dans le flux et sont alignables comme du texte)
- contenir ton groupe d'images dans un parent qui va simplement les aligner au centre

<div class="mon-groupe-d-images">
  <img src="http://placekitten.com/200/150" alt="">
  <img src="http://placekitten.com/200/150" alt="">
  <img src="http://placekitten.com/200/150" alt="">
</div>

.mon-groupe-d-images {
    text-align: center;
}

ça devrait le faire
Modifié par Raphael (29 Jun 2020 - 15:23)

Ah oui, d'accord.
Je ne savais pas qu'on pouvait mettre du text-align pour des photos, par exemple.
Ok, je teste ça.
Merci

Oui c'est une bonne astuce à connaître :
https://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

Bonjour,
je teste mais je ne trouve pas comment centrer mes chatons.
Help, Help ....
Désolé.
C'est mon plafond de verre du moment.
J'ai mis ceci :

.portfolio{
    background: #8d8367 ;
    
}
.portfolio img{
    text-align: center;
    margin: 0 auto; }

Et mes images sont bloquées sur la gauche ....
Si quelqu'un sait.
Guillaume
Modifié par gillaume (02 Jul 2020 - 11:49)

Salut Gillaume,

Comme l'indique Raphaël, c'est sur le conteneur des images que tu dois appliquer le text-align, pas sur l'image en elle même

Ah ....