Bonjour

J'ai crée des blocks coloré element 1 ,2, 3 etc comme dans l'exemple du cours pour être sur de ne pas faire d'erreur.

J'applique la propriétés justify-content avec la valeur center, pas de soucis les éléments se mettent au milieu de l'axe horyzontal

ensuite quand je rajoute la propriété align-items et que je mets la valeur center, les éléments restent en haut de l'écran, ça ne fonctionne pas!

j'ai fait beaucoup d'essais et à chaque fois j'ai échoué. En reprenant le cours et en créant 3 petits blocs, j'espérais comprendre et trouver mon erreur...

Je vous mets juste ci dessous la copie d'écran du cours openclassrooms où pour le coup ça marche...mais pas pour moi...

Merci d'avance et très bonne journée à vous.

#conteneur
{
    display:flex;
    justify-content: center;
    align-items: center;
}
.element1
{
    border: 1px solid black;
    border-radius: 10px 40px 40px 10px;
    width: 300px;
    height: 150px; 
    padding-top: 20px;
    background-color:rgb(133,234,162);
}
.element2
{
    border: 1px solid black;
    border-radius: 10px 40px 40px 10px;
    width: 300px;
    height: 150px; 
    padding-top: 20px;
    background-color:rgb(133,234,162);
}
.element3
{
    border: 1px solid black;
    border-radius: 10px 40px 40px 10px;
    width: 300px;
    height: 150px; 
    padding-top: 20px;
    background-color:rgb(133,234,162);
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="exo.css" />
        <title>essaiflex</title>
    </head>
  <body>

      
  <div id="conteneur">
      <div class = "element1" > je suis l'element 1 </div>
      <div class = "element2" > je suis l'element 2 </div>
      <div class = "element3" > je suis l'element 3 </div>
      </div>
    </body>
</html>

Anonyme

24 juillet 2019 à 13:27:17

Par défaut ton conteneur a la même hauteur que le plus haut de ses fils, mais comme tous ses fils ont la même hauteur eh bien... ils sont tous centrés mais ça ne se voit pas. Réduis la hauteur d'au moins un fils et/ou augment celle du conteneur pour constater l’alignement.

-
Edité par Anonyme 24 juillet 2019 à 14:01:34

Frogweb

24 juillet 2019 à 13:29:13

Salut,

ton container n'a pas de hauteur, à part celle de ces enfants.

Edit : trop rapide le Mat

-
Edité par Frogweb 24 juillet 2019 à 13:29:53

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

JulienHennebo

24 juillet 2019 à 13:46:28

Merci pour vos réponses.

Bien compris!

bonne journée

AlexandreLeoty

20 mai 2022 à 8:40:31

Merci j'ai également eu le même problème.....3 ans après

Lamecarlate

20 mai 2022 à 8:41:28

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Forums des Zéros

centrer les blocks avec flexbox

avec justify-content et align-items

Déterrage

centrer les blocks avec flexbox

avec justify-content et align-items

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs