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




css text align vertical (14)

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>

J'ai un ensemble div pour display:block . ( 90px height et width ) et j'ai un peu de texte à l'intérieur.

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

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

Des idées?


Techniques courantes à partir de 2014:

  • Approche 1 - transform translateX / translateY :

    Exemple ici / Exemple d'écran complet

    Dans les 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.

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    
  • Approche 2 - Méthode Flexbox:

    Exemple ici / Exemple d'écran complet

    Dans les navigateurs pris en charge , définissez l' display de l'élément ciblé sur flex et utilisez les 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 la hauteur de l'élément html / body est définie sur 100% .

    Pour l'alignement vertical, définissez la width / height de l'élément parent sur 100% et ajoutez display: table . Ensuite, pour l'élément enfant, changez l' display en table-cell et ajoutez vertical-align: middle .

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

    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 sommet avec déplacement:

    Exemple ici / Exemple d'écran complet

    Cette approche suppose que le texte a une hauteur connue - dans ce cas, 18px . Positionnez simplement l'élément à 50% du haut, par rapport à l'élément parent. Utilisez une valeur margin-top négative égale à 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 - La méthode de line-height (moins flexible - non suggérée):

    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 une valeur de line-height 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 ceci .

    .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.


Appliquer le style:

position: absolute;
top: 50%;
left: 0;
right: 0;

Votre texte serait centré quelle que soit sa longueur.


Cela a fonctionné pour moi

.center-stuff{  
      text-align: center;
      vertical-align: middle;
      line-height: 230px;/*This should be the div height*/
    }

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


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>


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 existe des solutions sur http://pmob.co.uk/ Recherchez "vertical align".

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:

Il 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 de IE comme IE10.



ajouter l' display: table-cell; 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 en direct 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
}

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 du codpen http://codepen.io/santoshkhalse/pen/xRmZwr


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


#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
}

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv{
        height:450px;
        background:#f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p{
        font-size:24px;}
    </style>
  </head>
  <body>
    <div class="maindiv">
      <h1>Title</h1>

    </div>
  </body>
</html>

<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>




css