Question Texte du centre CSS (horizontalement et verticalement) à l'intérieur d'un bloc div


j'ai un div mis à display:block. (90px  height et width) et j'ai du texte à l'intérieur.

J'ai besoin que le texte soit aligné au centre verticalement et horizontalement.

j'ai essayé text-align:center, mais ça ne fait pas la partie horizontale donc j'ai essayé vertical-align:middle mais ça n'a pas marché.

Des idées?


579
2018-04-18 13:22


origine


Réponses:


Si c'est une ligne de texte et / ou d'image, alors c'est facile à faire. Juste utiliser

text-align: center;
vertical-align: middle;
line-height: 90px;       /* the same as your div height */

c'est tout. Si cela peut être plusieurs lignes, alors c'est un peu plus compliqué. Mais il y a des solutions sur http://pmob.co.uk/   Recherchez "alignement vertical".

Comme ils ont tendance à être des hacks ou à ajouter des divs complexes ... J'utilise généralement une table avec une seule cellule pour le faire ... pour le rendre aussi simple que possible.


Mise à jour pour 2016/2017:

Cela peut être plus communément fait avec transform, et il fonctionne bien même dans les anciens navigateurs tels que IE10 et IE11. Il peut supporter plusieurs lignes de texte:

position: relative;
top: 50%;
transform: translateY(-50%); 

Exemple: https://jsfiddle.net/wb8u02kL/1/

Pour rétrécir envelopper la largeur:

La solution ci-dessus utilisait une largeur fixe pour la zone de contenu. Pour utiliser une largeur de film rétractable, utilisez

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Exemple: https://jsfiddle.net/wb8u02kL/2/

J'ai essayé le Flexbox, mais il n'était pas aussi largement supporté, car il casserait dans une ancienne version d'Internet Explorer comme IE10.


948
2018-04-18 13:29



Techniques courantes à partir de 2014:


  • Approche 1 - transform  translateX/translateY:

    Exemple ici / Exemple d'écran complet

    Dans navigateurs pris en charge (la plupart d'entre eux), vous pouvez utiliser top: 50%/left: 50% en combinaison avec translateX(-50%) translateY(-50%) pour centrer verticalement / horizontalement l'élément de façon dynamique.

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    

  • Approche 2 - Méthode Flexbox:

    Exemple ici / Exemple d'écran complet

    Dans navigateurs pris en charge, met le display de l'élément ciblé flex et utilise align-items: center pour le centrage vertical et justify-content: center pour le centrage horizontal. N'oubliez pas d'ajouter des préfixes de fournisseurs pour une prise en charge supplémentaire du navigateur (voir l'exemple).

    html, body, .container {
        height: 100%;
    }
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    

  • Approche 3 - table-cell/vertical-align: middle:

    Exemple ici / Exemple d'écran complet

    Dans certains cas, vous devrez vous assurer que html/body la hauteur de l'élément est définie sur 100%.

    Pour l'alignement vertical, définissez l'élément parent width/height à 100% et ajouter display: table. Ensuite, pour l'élément enfant, changez le display à table-cell et ajouter vertical-align: middle.

    Pour le centrage horizontal, vous pouvez soit ajouter text-align: center centrer le texte et tout autre inline éléments enfants. Alternativement, vous pouvez utiliser margin: 0 auto en supposant que l'élément est block niveau.

    html, body {
        height: 100%;
    }
    .parent {
        width: 100%;
        height: 100%;
        display: table;
        text-align: center;
    }
    .parent > .child {
        display: table-cell;
        vertical-align: middle;
    }
    

  • Approche 4 - Absolument positionné 50% du haut avec déplacement:

    Exemple ici / Exemple d'écran complet

    Cette approche suppose que le texte a une hauteur connue - dans ce cas, 18px. Juste positionner absolument l'élément 50% à partir du haut, par rapport à l'élément parent. Utilisez un négatif margin-top valeur qui est la moitié de la hauteur connue de l'élément, dans ce cas - -9px.

    html, body, .container {
        height: 100%;
    }
    .container {
        position: relative;
        text-align: center;
    }
    .container > p {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin-top: -9px;
    }
    

  • Approche 5 - Le line-height méthode (moins flexible - non suggéré):

    Exemple ici

    Dans certains cas, l'élément parent aura une hauteur fixe. Pour le centrage vertical, tout ce que vous avez à faire est de définir line-height valeur sur l'élément enfant égale à la hauteur fixe de l'élément parent.

    Bien que cette solution fonctionne dans certains cas, il est à noter que cela ne fonctionnera pas quand il y a plusieurs lignes de texte - comme ça.

    .parent {
        height: 200px;
        width: 400px;
        text-align: center;
    }
    .parent > .child {
        line-height: 200px;
    }
    

Les méthodes 4 et 5 ne sont pas les plus fiables. Aller avec l'un des 3 premiers.


376
2017-09-12 01:23



Utilisation de flexbox / CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

Le CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

Pris à partir de Astuce: La manière la plus simple de centrer les éléments verticalement et horizontalement


49
2017-11-10 03:25



ajouter la ligne display: table-cell; à votre css pour ce div. Seules les cellules de table supportent le vertical-align: middle; mais vous pouvez donner cette définition [table-cell] à la div ..

exemple vivant ici: http://jsfiddle.net/tH2cc/

div{
    height:90px;
    width:90px;
    text-align:center;
    border:1px solid silver;
    display: table-cell; // this says treat this element like a table cell
    vertical-align:middle; //now we can center vertically like in a TD
}

23
2018-04-18 13:28



J'utilise toujours le CSS suivant pour un conteneur, pour centrer son contenu horizontalement et verticalement.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Voyez-le en action ici: https://jsfiddle.net/yp1gusn7/


12
2017-08-23 08:48



vous pouvez essayer le code très facile pour cela

  display:flex;
  align-items: center;
  justify-content:center;

.box{
  height:90px;
  width:90px;
  background:green;
  display:flex;
  align-items: center;
  justify-content:center;
}
<div class="box">
  Lorem 
</div>

lien codpen http://codepen.io/santoshkhalse/pen/xRmZwr


11
2017-12-16 10:07



Donner cette classe css à la cible

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* not necessary just to see the result clearly */
}
<div class="centered">This text is centered horizontally and vertically</div>


8
2017-09-11 12:41



Approche 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Approche 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Approche 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>


6
2017-07-05 12:54



#parent
{
  display:table;
}
#child
{
  display:table-cell;
  width:100%; //as large as its parent to center the text horizontally
  text-align: center;
  vertical-align:middle;//vertically align this element on its parent
}

4
2018-02-22 03:34



<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

3
2017-12-09 02:00



Cela fonctionne pour moi (testé ok!)

html:

<div class="mydiv">
    <p>Item to be Centered!</p>
</div>

css:

.mydiv {
    height: 100%; /* or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* to compensate own width and height */
}

vous pouvez choisir d'autres valeurs puis 50% fi. 25% au centre à 25% du parent


1
2017-12-05 20:45