J'ai le code ici, mais essentiellement, le problème est que j'ai ces cartes de produit et j'essaie de les obtenir au centre, mais je les alignez aussi avec les autres cartes si cela a du sens.
https://codepen.io/manfreebie/pen/nwnvygz
Voici un visuel de quoi Je veux accomplir et ce qui se passe réellement. Il a l'air bien au début jusqu'à ce que vous essayiez de le redimensionner.
J'ai essayé de rendre le cocktail-conteneur avoir la valeur flex-démarrage au lieu du centre de l'attribut de contenu justify comme celui-ci < PRE> XXX
Mais cela laisse beaucoup d'espace blanche sur le côté droit quand je le redimensionnelle. J'ai essayé de jouer un peu avec un bloc inline et d'utiliser du texte-aligner, mais cela n'a pas fonctionné non plus.
4 Réponses :
Ajouter ce code.
#cocktails-container::after {
content: "";
flex: auto;
}
Je ne partage que des parties que j'ai changées, le reste est le même.
Veuillez essayer ce code, comment puis-je centrer ces éléments correctement? J'espère que ce code sera utile pour vous. Merci.
Le problème que j'ai identifié lors de la vérification du code est que vous utilisez un margin code> Marge: 50px 0px; code> pour la classe .cocktail code> . Changez-le en dessous. @media (max-width: 800px) {
.cocktail {
width: 60%;
margin: 50px auto;
}
}
Avez-vous essayé en ligne-block et flotter: laissé?