web-dev-qa-db-fra.com

Comment centrer un élément <p> dans un conteneur <div>?

Je souhaite que mon élément <p> soit au centre d'un conteneur <div>, comme s'il était parfaitement centré - les marges supérieure, inférieure, gauche et droite divisent les espaces également.

Comment puis-je y arriver?

div {
  width: 300px;
  height: 100px;
}
p {
  position: absolute;
  top: auto;
}
<div>
  <p>I want this paragraph to be at the center, but it's not.</p>
</div>

htmlcsstextcentering
31
Johnsy

Vous n'avez pas besoin de positionnement absolu Utilisez

p {
 text-align: center;
line-height: 100px;

}

Et ajustez à volonté ...

Si le texte dépasse la largeur et parcourt plus d'une ligne

Dans ce cas, le réglage que vous pouvez effectuer consiste à inclure la propriété display dans vos règles comme suit:

(J'ai ajouté un fond pour une meilleure vue de l'exemple)} _

div
{
  width:300px;
  height:100px;  
  display: table; 
  background:#ccddcc;  
}


p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell;   
}

Joue avec ça JBin

enter image description here

44
Fico

Pour obtenir un centrage gauche/droite, appliquez ensuite text-align: center à la div et margin: auto à la p.

Pour le positionnement vertical, assurez-vous de bien comprendre les différentes façons de le faire. Il s’agit d’un problème courant: Alignement vertical des éléments dans un div

9
GordonsBeard

Vous devriez faire ces étapes: 

  1. l'élément mère devrait être positionné (pour EXP, vous pouvez lui donner la position: relative;)
  2. le élément enfant aurait dû positionner " Absolute " et les valeurs devraient être définies comme suit: top: 0; (être au milieu verticalement)
  3. pour l’élément enfant vous devez définir " margin: auto " (au milieu verticalement)
  4. le enfant et mère Element devrait avoir "hauteur" et "largeur" ​​valeur
  5. pour élément mère => text-align: center (milieu au milieu)

♣♣ Voici simplement le résumé de ces 5 étapes:

.mother_Element {
    position : relative;
    height : 20%;
    width : 5%;
    text-align : center
    }
.child_Element {
    height : 1.2 em;
    width : 5%;
    margin : auto;
    position : absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    }
2
ashkan nasirzadeh

Contenu centré et médiocre?

Faites-le de cette façon:

<table style="width:100%">
    <tr>
        <td valign="middle" align="center">Table once ruled centering</td>
    </tr>
</table>

Je l'ai tripoté ici

Ha, laisse-moi deviner .. tu veux des DIV ..

assurez-vous que votre première sortie DIV se comporte comme une cellule de tableau, puis appelez-la avec align vertical: middle;

<div>
    <p>I want this paragraph to be at the center, but I can't.</p>
</div>

div {
    width:500px;
    height:100px;
    background-color:aqua;
    text-align:center;
    /*  there it is */
    display:table-cell;
    vertical-align:middle;
}

jsfiddle.net/9Mk64/

0
Milche Patern