Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème avec margin: auto

marges gauches et droites avec margin: 0 auto

Sujet résolu
    6 septembre 2021 à 22:18:29

    Bonjour,

    J'ai un petit problème: je veux centrer un élément (h2) horizontalement dans un header, tout en mettant

    text-align: right;

    pour que le sous-titre (h2) soit en légér décalage par rapport au titre h1.

    j'ai donc mis comme marges:

    margin: 0 auto;

    mais lorsque j'inspecte la page, je vois que les marges gauche et droite sont de taille différentes, et que leur rapport n'est pas fixe (parfois la marge gauche est plus grande que la droite, parfois c'est l'inverse).

    Comment faire pour que les marges soient de même taille sans pour autant avoir des marges fixes ou en pourcentage?

    Voici le lien vers ma page

    Merci d'avance de votre aide!

    • Partager sur Facebook
    • Partager sur Twitter
      6 septembre 2021 à 22:56:33

      Bonsoir, je n'ai pas tout compris de ton soucis mais auto doit etre placé avant tout car si on suit ce que tu dis

      margin-left:10px

      ensuite tu fais

      margin:auto;

      ca réinitialise tout hors que si tu fais

      margin:auto;

      tout passe en auto

      ensuite

      margin-left:10px

      lui tu lui fais une margr de 10.

      Et pour le texte align right si tu n'as pas defini une taille le texte ne bougera pas. Par exemple width:50% et la text-align marchera 

      -
      Edité par zvheer 6 septembre 2021 à 22:57:45

      • Partager sur Facebook
      • Partager sur Twitter
        10 septembre 2021 à 20:08:57

        Bonjour,

        Merci beaucoup de ta réponse, mais ça ne répond pas à ma question...

        Ma question était pourquoi la taille des marges droite et gauche en pixels est différente alors que j'ai mis:

        margin-right: auto;
        margin-left: auto;

        Merci d'avance de toute aide!

        • Partager sur Facebook
        • Partager sur Twitter
          10 septembre 2021 à 20:12:58

          Si tu voulais du pixel alors défini la marge en pixel :/ Auto avec margin right ou left est gerer en fonction de l'espace restant. De toute manière je n'utilise jamais auto avev margin top right left ou autre juste margin: auto ok ensuite pour le reste tu peux utise les différentes unités de mesures: px, vh, vw...

          Et dans le code que tu as mis au dessus tu avais mis

          text align center

          margin 0 auto

          -
          Edité par zvheer 10 septembre 2021 à 20:14:02

          • Partager sur Facebook
          • Partager sur Twitter
            10 septembre 2021 à 21:00:15

            Re-bonjour,

            Je suis désolé de me répéter mais ça ne répond pas à ma question:

            j'ai eu besoin d'utiliser 

            margin: 0 auto;

            (ce qui équivaut exactement à:

            margin-top: 0;
            margin-bottom: 0;
            margin-left: auto;
            margin-right: auto;

            cf. MDN)

            car je veux couvrir plusieurs largeurs de page sans avoir à utiliser trop de 

            @media (max-width:...){
            }

            PROBLEME:

            Voici des screens de ma page à différentes largeurs:

            On voit bien que le sous titre n'est pas fixe par rapport au titre, même si j'admets que pour le premier cas je pourrais utiliser

            @media

            comment résoudre ce problème, sachant que je ne peux pas utiliser d'unités absolues ni même des pourcentages, car le texte ne chage pas de taille mais la fenêtre oui...

            Merci d'avance pour tout aide!

            • Partager sur Facebook
            • Partager sur Twitter
              10 septembre 2021 à 21:33:44

              Si ce sous titre est placé dans une balise de type p div ou autre en gros une balise de type block tu lui fais comme css

              width:100%;

              text-align:center

              ca devrait marcher si tu n'as pas utilise de display flex ou autre qui pourrait deranger.

              Pas besoin de media queries.

              Width:100% pour lui dire qu'il occupe 100% de la largeur comme ca tect-align center centrera toujours le texte

              Si tu appliques cette meme regle sur la div du dessus ou le gros titre plutôt sans display flex ou autre ca devrait te donner le resultat que tu attends 

              -
              Edité par zvheer 10 septembre 2021 à 21:36:13

              • Partager sur Facebook
              • Partager sur Twitter
                10 septembre 2021 à 21:49:28

                Bonsoir,

                Si je reprend ta page https://zengarden.pierreneillo.repl.co/ en l’état avant tes modifications, c'est le margin-right à 20% que tu appliques sur ton h2 qui pose soucis tout simplement.

                Donc retire le margin-right 20% et remplace text-align: right par center et c'est réglé.

                Et pour que ton h2 soit vraiment centré, retire également le padding-right de 10px.

                Par défaut, les balise de type <Hn> font déjà 100%, inutile de le préciser en css! Dans ton cas, tu avait aussi fixé la largeur de ton h2 à 75% avec une largeur maximale de 500px. Tu peu également retirer ces 2 attributs.

                Edit : J'ai mal compris la demande initiale. Tu ne veux pas center le texte mais juste ton h2. Dans ce cas, retire juste le margin-right à 20%. Tu devrai obtenir le rendu souhaité.

                -
                Edité par Lord Morpheus 10 septembre 2021 à 21:59:42

                • Partager sur Facebook
                • Partager sur Twitter

                Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

                Problème avec margin: auto

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                • Editeur
                • Markdown