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

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

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 !