Bonjour,

Je cherches depuis quelques jours comment alliger du texte horizontalement  dans un paragraphe que qu'il soit toujour centré si il y a 1 ligne ou 2 lignes (pour le moment j'ai un problème quand mon text est trop court et qu'il est uniquement sur 1 ligne

Mon code HTML :

?>
   <div class="module-border-wrap"><div class="module"> <p class="center"><?php echo $res;?></p></div></div>
<?php

Mon code CSS :

.module-border-wrap {
      max-width: 100%;
      height: 107px;
      padding: 1rem;
      position: relative;
      background: linear-gradient(to right, blue, purple);
      padding: 3px;
    }
    
    .module {
      background: #222;
      color: white;
      padding: 10px;
      text-align : center;
      font-weight: bold;
      font-family: cursive;
      height: 100px;
      vertical-align:middle;
      font-size: 27px;
      
    }

    .center{
      margin : 0;
      height : 75px;
      vertical-align: middle
    }

Avez vous une idée de comment je pourais régler mon problème ?

(merci d'avoir pris le temps de lire mon problème 🙂)

-
Edité par Killianlv 19 janvier 2021 à 11:11:45

Bonjour,

je ne suis pas sur d'avoir bien compris ta demande.

Si tu parles d'un centrage vertical alors tu peux utiliser display: flex pour obtenir ce résultat.

Voici ton code corrigé avec des petites améliorations (notamment la suppression de la div .module-border-wrap qui peut être remplacée par un pseudo-element).

HTML

<div class="module"><p class="center"><?php echo $res;?></p></div>

CSS

.module:before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  right: -3px;
  z-index: -1;
  height: calc(100% - 13px);
  background: linear-gradient(to right, blue, purple);
}
     
.module {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 10px;
  background: #222;
  color: white;
  text-align: center;
  font-weight: bold;
  font-family: cursive;
  font-size: 27px;
}

.center{
  margin : 0;
}

Avec plaisir, bonne continuation dans ton apprentissage du CSS.

Et n'hésites pas à approfondir Flexbox, c'est une excellente solution pour pas mal de problème de positionnement. 😉