CSS Problème avec align-items
Répondre à la discussion
Affichage des résultats 1 à 10 sur 10

CSS Problème avec align-items



  1. #1
    Ginklaw

    CSS Problème avec align-items


    ------

    Bonjour,

    Je suit j'apprend actuellement le HTML et le CSS, et je n'arrive pas à centrer un élément en utilisant align-items, il m'est impossible de contrôler l'axe secondaire :/

    Voici le code CSS :
    Code:
    #menu
    {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border: 2px black solid;
     
    }
     
    .test, .test2, .test3
    {
        width: 400px;
        height: 200px;
        background-color: cyan;
        text-align: center;
    }
     
    .test2
    {
        background-color: green;
    }
     
    .test3
    {
        background-color: red;
    }
    Et le code html :

    Code HTML:
    <div id="menu">
       <div class="test">Menu 1</div>
       <div class="test2">Menu 2</div>
       <div class="test3">Menu 3</div>
    </div>
    Merci pour votre aide.

    -----

  2. #2
    CM63

    Re : CSS Problème avec align-items

    Bonjour,

    Et si tu mets le align-items dans le .test, .test2, .test3 ?

  3. #3
    Ginklaw

    Re : CSS Problème avec align-items

    Rien ne change en mettant align-item dans .test, .test2, .test3.

  4. #4
    f.oreste

    Re : CSS Problème avec align-items

    oublie ces conneries de css... c'est nawak... seul un tableau est sûr pour centrer en largeur et hauteur(surtout) dès fois ça marche avec display table-cell...(pour un div) mais à l'expérience ça rajoute du désordre(peu sûr) et rend le code moins lisible.

    bref, css pas super au point, surtout quand le meilleur moyen après celui-ci pour centrer en largeur relève des attribut HTML avec div-align:center... mais ne peut rien pour la hauteur...

    vriament un bande de naz ces ricains où autres quand il s'y mette

  5. A voir en vidéo sur Futura
  6. #5
    Stan_94

    Re : CSS Problème avec align-items

    Citation Envoyé par f.oreste Voir le message
    bref, css pas super au point, surtout quand le meilleur moyen après celui-ci pour centrer en largeur relève des attribut HTML avec div-align:center... mais ne peut rien pour la hauteur...
    Heu, c'est sûr ça ? Parce que j'aurais tendance à dire que c'est plutôt un manque de compétence qui fait que ça semble compliqué et peu sûr... Du moins de ce que j'en ai essayé du CSS. Moi aussi je préfère faire un tableau mais le code HTML mélange alors les données et les instructions de mise à forme. C'est donc trés rigide.
    Alors qu'avec le CSS, c'est (ça semble, je ne maitrise pas encore assez la bête) facile de modifier la mise en page.

    A titre d'exercice, je vais tâcher de reprendre le code de Ginklaw...

  7. #6
    Stan_94

    Re : CSS Problème avec align-items

    ah ben voilà, pour centrer horizontalement et verticalement le texte dans chacune des 3 box, j'ai juste remplacé :

    Code:
    .test, .test2, .test3
    {
        width: 400px;
        height: 200px;
        background-color: cyan;
        text-align: center;
    }
    par
    Code:
    .test, .test2, .test3
    {
        width: 400px;  
        height: 200px; 
        display: flex;
        background-color: cyan;
        justify-content: center; 
        align-items: center;    
    }
    A noter que :
    align-items: center;
    aligne verticalement le texte dans sa box.

    justify-content: center
    l'aligne horizontalement

    et il faut ajouter
    display: flex;
    pour dire que les box définie par test, test2 et test3 s'affiche en mode flex.
    (Il n'y a pas d'"héritage" entre le div contenant "menu" et les div contenues "test..."

  8. #7
    Ginklaw

    Re : CSS Problème avec align-items

    Bonjour,

    Effectivement cela centre le texte mais je souhaite centrer les 3 box horizontalement et verticalement, et seul l'axe horizontale fonctionne :/.

  9. #8
    f.oreste

    Re : CSS Problème avec align-items

    Citation Envoyé par Stan_94 Voir le message
    Heu, c'est sûr ça ? Parce que j'aurais tendance à dire que c'est plutôt un manque de compétence qui fait que ça semble compliqué et peu sûr... Du moins de ce que j'en ai essayé du CSS. Moi aussi je préfère faire un tableau mais le code HTML mélange alors les données et les instructions de mise à forme. C'est donc trés rigide.
    Alors qu'avec le CSS, c'est (ça semble, je ne maitrise pas encore assez la bête) facile de modifier la mise en page.

    A titre d'exercice, je vais tâcher de reprendre le code de Ginklaw...
    je crois surtout qu'ils aiment nous faire courir, parceque l'analyse de leur catégorie et propriété montre bien que c'est foutage de gueule complet, qui n'a s'autre intérêt que de créer des difficultés pour faire des difficultés, le problème est plus économique, que strictement informatique... si il voulait faire simple, cela ne prendrais pas 20 minutes...
    il pourrait, mais ne le veulent pas... cela permet de vendre des cours et formations aux gogos...

  10. #9
    Stan_94

    Re : CSS Problème avec align-items

    Ah ça, si ça avait pu être plus simple à utiliser...

    Ceci dit, Ginklaw, pour les box, je ne comprend peut-être pas le problème.
    La box contenant "menu" et les 3 box contenues "testn" sont à la même hauteur, donc forcement ça ne se voit pas, mais c'est bien centrée verticalement aussi ! (Du moins en testant sur IE11).
    Aprés si il faut centrer sur la page, alors il faudrait mieux donner à "menu" un hauteur de 100% et pas 200px, comme ça sera bien entré sur la page.
    En espérant que c'est bien de ça que tu parles !

  11. #10
    dfrthreads

    Re : CSS Problème avec align-items

    Bonjour,

    Juste un avis personnel (ou même un peu plus que personnel).
    C'est très bien d'utiliser le html et le css et contrairement a ce qui a été dis je ne pense pas qu'il faille utiliser une table pour positionner tes éléments mais bien du css.
    La raison est simple, pour une programmation propre et surtout évolutive et maintenable facilement il faut séparer le contenu de la mise en page.
    Dans ton cas le contenu est dans le html et la mise en page dans le css cela permet notamment de changer la mise en page sans avoir a tout retoucher, juste le css. Ce que ne permet pas une table html.
    Si par exemple tu veux par la suite faire plusieurs thèmes pour ton site il sera beaucoup plus pratique d'avoir séparer le contenu de la mise en page (juste a faire un autre css)
    C'est un des principes de base de la programmation il faut découper ton code en couches, présentation, mise en page, accès aux données si tu as besoin de lire des données dans une base de données, etc.
    Et surtout ne rien mélanger car si tu change ou fait évoluer une des couches tu ne refait pas tout ton code !
    Donc tu as bien commencé, continu dans cette voie et tu verra un peu plus loin dans ton apprentissage qu'il existe des tas de "Framework" qui te faciliterons la vie pour respecter le développement en couche.
    Mais pense bien a respecter les différentes couches car la qualité d'un code (maintenance, évolutivité, etc.) est jugée en grande partie sur le respect des couches ! (ce n'est évidemment pas le seul critère de qualité, mais si celui la n'est pas respecté ton code est presque bon a jeter !!!)

Discussions similaires

  1. Items sur paludisme et tuberculose
    Par Azaaar dans le forum Biologie
    Réponses: 5
    Dernier message: 02/06/2017, 20h47
  2. Cannot find any item of source files on c++! - je ne trouve pas d'items de source files en c++!!
    Par bachahine dans le forum Programmation et langages, Algorithmique
    Réponses: 1
    Dernier message: 15/10/2013, 19h28
  3. recherche acronis WD align pour disque sata WD10EARX
    Par Eki27 dans le forum Matériel - Hardware
    Réponses: 9
    Dernier message: 19/03/2012, 11h49
  4. transfo 220-110, dangereux ou non pour items fragiles ?
    Par inviteae78c9ee dans le forum Électronique
    Réponses: 11
    Dernier message: 07/05/2007, 19h19