Bonjour, cliquez-ici pour vous inscrire et participer au forum.
  • Login:



+ Répondre à la discussion
Affichage des résultats 1 à 9 sur 9

CSS Problème avec align-items

  1. Ginklaw

    Date d'inscription
    avril 2017
    Âge
    18
    Messages
    7

    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.

    -----

     


    • Publicité



  2. CM63

    Date d'inscription
    juin 2006
    Localisation
    Un peu au large de la faille de Limagne
    Âge
    64
    Messages
    3 097

    Re : CSS Problème avec align-items

    Bonjour,

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

  3. Ginklaw

    Date d'inscription
    avril 2017
    Âge
    18
    Messages
    7

    Re : CSS Problème avec align-items

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

  4. f.oreste

    Date d'inscription
    septembre 2015
    Messages
    608

    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. Stan_94

    Date d'inscription
    février 2006
    Localisation
    Val de Marne
    Âge
    46
    Messages
    391

    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...
     


    • Publicité



  6. Stan_94

    Date d'inscription
    février 2006
    Localisation
    Val de Marne
    Âge
    46
    Messages
    391

    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..."
     

  7. Ginklaw

    Date d'inscription
    avril 2017
    Âge
    18
    Messages
    7

    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 :/.
     

  8. f.oreste

    Date d'inscription
    septembre 2015
    Messages
    608

    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...
     

  9. Stan_94

    Date d'inscription
    février 2006
    Localisation
    Val de Marne
    Âge
    46
    Messages
    391

    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 !
     


    • Publicité







Sur le même thème :





 

Discussions similaires

  1. Items sur paludisme et tuberculose
    Par Azaaar dans le forum Biologie
    Réponses: 5
    Dernier message: 02/06/2017, 19h47
  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, 18h28
  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, 10h49
  4. transfo 220-110, dangereux ou non pour items fragiles ?
    Par yvessitbon dans le forum Électronique
    Réponses: 11
    Dernier message: 07/05/2007, 18h19