Partage
  • Partager sur Facebook
  • Partager sur Twitter

Margin empêche de centrer mon titre

Sujet résolu
    22 mars 2019 à 11:54:13

    Bonjour tout le monde,

    J'ai un soucis dans mon code HTML/CSS, je n'arrive pas à centrer mon titre h2 correctement.

    Voici mon code HTML

    <?php
    include_once("body/header-mobile.php");
    ?>
    
    <div class="block block-center">
      <div class="modif-cv">
        <form class="form-modifcv" action="modifier-cv.php" method="post">
          <div class="content-modifcv">
            <div class="categorie cat-formation">
              <div class="title title-form">
                <div class="formation">
                  <h2>Formation</h2>
                </div>
              </div>
              <div class="add add-form">
                <button type="button" name="button">
                  <img src="img/icon/button-add.png" alt="Ajouter">
                </button>
              </div>
            </div>
            <div class="categorie cat-langues">
              <div class="title title-langues">
                <h2>Langues</h2>
              </div>
              <div class="add add-langues">
                <button type="button" name="button">
                  <img src="img/icon/button-add.png" alt="Ajouter">
                </button>
              </div>
            </div>
            <div class="categorie cat-competences">
              <div class="title title-competences">
                <h2>Compétences</h2>
              </div>
              <div class="add add-compétences">
                <button type="button" name="button">
                  <img src="img/icon/button-add.png" alt="Ajouter">
                </button>
              </div>
            </div>
            <div class="categorie cat-exppro">
              <div class="title title-exppro">
                <h2>Expériences Professionnelles</h2>
              </div>
              <div class="add add-exppro">
                <button type="button" name="button">
                  <img src="img/icon/button-add.png" alt="Ajouter">
                </button>
              </div>
            </div>
            <div class="categorie cat-centreinterets">
              <div class="title title-centreinterets">
                <h2>Centres d'intérêts</h2>
              </div>
              <div class="add add-centreinterets">
                <button type="button" name="button">
                  <img src="img/icon/button-add.png" alt="Ajouter">
                </button>
              </div>
            </div>
            <div class="categorie cat-autrediplome">
              <div class="title title-autrediplome">
                <h2>Autres diplômes</h2>
              </div>
              <div class="add add-autrediplome">
                <button type="button" name="button">
                  <img src="img/icon/button-add.png" alt="Ajouter">
                </button>
              </div>
            </div>
            <div class="categorie cat-prixdist">
              <div class="title title-prixdist">
                <h2>Prix et distinctions</h2>
              </div>
              <div class="add add-prixdist">
                <button type="button" name="button">
                  <img src="img/icon/button-add.png" alt="Ajouter">
                </button>
              </div>
            </div>
            <div class="valid-cv">
              <input type="submit" name="valid-cv" value="Terminé">
            </div>
          </div>
        </form>
      </div>
    </div>
    
    <?php
    include_once("body/footer-mobile.php");
    ?>
    

    Et mon code CSS

    .block-center .form-modifcv .content-modifcv{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .block-center .form-modifcv .categorie .title{
      width: 20rem;
      text-align: center;
      background: url(../img/icon/ligne-modif-cv.png);
      background-repeat: no-repeat;
      background-position: center;
    }
    
    .block-center .form-modifcv .categorie .title .formation{
      width: 40%;
      text-align: center;
      background-color: white;
    }

    Et l'image du site

    Je voudrais que le "formation" soit centré et la ligne qui le traverse. Pour ce faire j'ai mit la ligne en background, et si je remettait un background white sur le div formation (pour qu'on est l'impression qu'il y a en fait deux lignes) le blanc prenait 100% du viewport en largeur. J'ai donc réduit la width de la div formation mais impossible de le replacer correctement ensuite...

    Avez- vous une idée de comment je pourrais faire ?

    Merci d'avance pour vos réponses :)

    • Partager sur Facebook
    • Partager sur Twitter
      22 mars 2019 à 12:01:14

      Salut,

      Je ne sais pas si je comprend bien mais tu cherches à faire ça non ? 

      https://jsfiddle.net/z36yahet/

      Source : https://stackoverflow.com/questions/15557627/heading-with-horizontal-line-on-either-side

      • Partager sur Facebook
      • Partager sur Twitter

      -> Hébergement GRATUIT <- Parfait pour débuter/dev/test/...

        22 mars 2019 à 12:06:42

        Oui c'est ça, j'ai oublié de préciser que je ne pouvais pas utiliser de position absolute et relative car à therme mais titre changeront de place.

        Mais j'ai finalement trouvé la solution entre temps. J'ai laissé le width 40% et j'ai rajouté un margin: 0 auto. Cette ligne à centrer mais éléments automatiquement !

        • Partager sur Facebook
        • Partager sur Twitter

        Margin empêche de centrer mon titre

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