0
votes

Pourquoi mes images ne seront-elles pas alignées horizontalement sur CSS

Bonjour, j'ai 6 images que j'ai sur mon site qui apparaissent verticalement empilées verticalement, mais je veux qu'ils soient horizontalement empilés et centrés alignés. 4 des images ont aussi des légendes que je dois apparaître juste en dessous de chaque image ... Peut-on aider à vous aider à vous aider tellement

Voici mon HTML: P>

body {
  background-color: #b6e6bd;
  line-height: 1.6;
}

.container-fluid {
  padding: 1% 20%;
  margin: auto;
  text-align: center;
}

img {
  width: 100px;
  line-height: 0;
  margin: 0 1%;
  display: flex;
  justify-content: center;
}

figcaption {
  text-align: center;
  width: 100px;
}

html css bootstrap-4

1 commentaires

Ajouter Align-Articles: Centre à img

5 Réponses :

0
votes

Faites de votre conteneur d'image un élément flex qui établit le contenu d'une ligne:

.container-of-images {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

0 commentaires

0
votes

Vous devez ajouter un affichage: en ligne; ou afficher: Bloc en ligne; à votre CSS.

body {
  background-color: #b6e6bd;
  line-height: 1.6;
}

.container-fluid {
  padding: 1% 20%;
  margin: auto;
  text-align: center;
}

img {
  width: 100px;
  line-height: 0;
  margin: 0 1%;
  display: flex;
  justify-content: center;
  display: inline;
}

figcaption {
  text-align: center;
  width: 100px;
}

0 commentaires

0
votes

Avez-vous essayé d'utiliser Flexbox sur le conteneur? Essayez ceci: xxx

0 commentaires

0
votes

Essayez ce code CSS, le problème que j'ai trouvé était cet affichage: l'inline-bloc aurait dû être utilisé à la place de Flex.

 

        body {
            background-color: #b6e6bd;
            line-height: 1.6;
        }

        .container-fluid {
            margin: auto;
            text-align: center;
            width:100%;
        }

        img {
            width: 100px;
            line-height: 0;
            margin: 0 1%;
            display: inline-block;
            justify-content: center;
            vertical-align: middle;
        }

        figcaption {
            text-align:
                center;
            width: 100px;
        }

        figure {
            display: inline-block;vertical-align: middle;
        }

1 commentaires

Merci cela fonctionne ... mais en fait, j'ai utilisé Flex afin que cela soit réactif dans la version mobile ... que puis-je faire pour le faire (n'a pas besoin des solutions exactes, mais j'aurais besoin de flex et de médiasqueur?)

0
votes

Basé sur votre si vous ajoutez la propriété CSS Affichage: flex code> à conteneur-de-images code> classe, il résoudra votre problème. Mais vous résolvez être conscient de la conception réactive pour cela.

.container-of-images {
    display: flex;
    flex-direction: row; /* extra line flex alone can solve your problem */
    justify-content: space-around; /* extra line to space images around */
}

0 commentaires