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




css text align vertical (17)

Utilisation de flexbox / CSS:

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

Le CSS:

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

Extrait du conseil rapide: Le moyen le plus simple de centrer les éléments verticalement et horizontalement

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?


footer {
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: 0;
    left: 0;
}

Ajuster la hauteur de la ligne pour obtenir l'alignement vertical.

line-height: 90px;

Appliquer le style:

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

Votre texte serait centré quelle que soit sa longueur.


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

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


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>


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

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>


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.


Vous pouvez essayer les méthodes suivantes:

1. Si vous avez un seul mot ou une seule phrase, le code suivant peut faire l'affaire.

Avoir un texte à l'intérieur d'une balise div et lui donner un identifiant. Définissez les propriétés suivantes pour cet ID.

id-name {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed red;
}

Remarque: Assurez-vous que la propriété line-height est identique à la hauteur de la division.

Image

Mais si le contenu contient plus d'un mot ou d'une ligne, cela ne fonctionne pas. Aussi, il y aura des moments où vous ne pouvez pas spécifier la taille d'une divison en px ou en% (quand la divison est vraiment petite et que vous voulez que le contenu soit exactement au milieu)

2. Pour résoudre ce problème, nous pouvons essayer la combinaison de propriétés suivante.

id-name {
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed red;
}

Image

Ces 3 lignes de code définissent le contenu exactement au milieu d'une division (quelle que soit la taille de l'affichage). Le "align-items: center" aide au centrage vertical tandis que "justify-content: center" le rend horizontalement centré.

Remarque: Flex ne fonctionne pas dans tous les navigateurs. Assurez-vous d'ajouter des préfixes de fournisseurs appropriés pour une prise en charge supplémentaire du navigateur.


<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
        width: 100%;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p>hello world</p>
    </div>
  </body>
</html>

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.


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/


Cela devrait être la bonne réponse. Plus propre et plus simple:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

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
}




css