html - verticalement - vertical align css




Comment puis-je centrer verticalement du texte avec CSS? (20)

Autrement:

Ne définissez pas l'attribut height du div , mais utilisez plutôt padding: pour obtenir l'effet. De même que line-height, cela ne fonctionne que si vous avez une ligne de texte. Bien que de cette façon, si vous avez plus de contenu, le texte sera toujours centré, mais le div lui-même sera légèrement plus grand.

Donc, au lieu d'aller avec:

div {
  height:120px;
  line-height: 120px;
}

Tu peux dire:

div {
   padding: 60px 0; //Maybe 60 minus font-size divided by two, if you want to be  exact
}

Ceci placera le padding supérieur et inférieur du div à 60px , et le padding gauche et droit à zéro, faisant le div 120px (plus la taille de votre police) haut, et plaçant le texte verticalement centré dans le div.

J'ai un élément div qui contient du texte, et je veux aligner le contenu de ce div verticalement.

Voici mon style div:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

Quelle est la meilleure façon de procéder?


Essayez cette solution :

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Construit en utilisant CSS + .


Flexboxes qui ont été introduites dans CSS3 sont la solution:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Note : Remplacez la ligne au-dessus de laquelle est marqué comme important avec l'une de ces lignes, si vous voulez centrer le texte:

1) Seulement verticalement:

margin: auto 0;

2) Seulement horizontalement:

margin: 0 auto;

J'ai vu les réponses précédentes, Ils ne fonctionneront que pour cette largeur d'écran (non réactif). Pour le responsive vous devez utiliser flex,

Exemple

div{ display:flex; align-item:center;}

Je ne suis pas sûr que quelqu'un ait suivi le chemin du writing-mode , mais je pense qu'il résout le problème proprement et qu'il a un large soutien :

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}
<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

Cela va, bien sûr, travailler avec toutes les dimensions dont vous avez besoin (en plus de 100% du parent). Si vous décommentez les lignes de frontière, il vous sera utile de vous familiariser.

JSFiddle démo pour vous de jouer du violon.

Support Caniuse : 85,22% + 6,26% = 91,48% (même IE est dedans !)


Je voudrais juste étendre la réponse de @michielvoo afin de libérer le besoin de hauteur de ligne et de respiration de hauteur div. Il s'agit essentiellement d'une version simplifiée comme celle-ci:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

NOTE: commenté qu'une partie de css est nécessaire pour fixed-height de div englobant.


Le code suivant placera la div au milieu de l'écran indépendamment de la taille de l'écran ou de la taille div :

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Voir plus de détails sur flex here .


Le moyen simple et polyvalent est (comme l'approche de la table michielvoo):

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display:table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

L'utilisation de cet attribut (ou d'une classe équivalente) sur une balise parent fonctionne même pour de nombreux enfants:

<parent ctrv>  <ch1/>  <ch2/>   </parent>

Partout où vous voulez un style de centre vertical, vous pouvez essayer d' display:table-cell et vertical-align:middle .

Exemple:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>


Pour référence et pour ajouter une réponse plus simple:

Pure CSS:

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Ou en tant que SASS / SCSS Mixin:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Utiliser par:

.class-to-center {
    @include vertical-align;
}

Par le post de blog de Sebastian Ekström Vertical aligner n'importe quoi avec seulement 3 lignes de CSS :

Cette méthode peut rendre les éléments flous car l'élément est placé sur un "demi-pixel". Une solution pour cela est de définir son élément parent à preserve-3d. Comme suit:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Nous vivons en 2015+ et Flex Box est pris en charge par tous les principaux navigateurs modernes.

Ce sera la façon dont les sites Web sont fabriqués à partir de maintenant.

Apprend le!


Réglez-le dans le button au lieu de div si vous ne vous souciez pas de son petit effet visuellement 3d.

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}
<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>


Tout le crédit va à ce lien propriétaire @Sebastian Ekström Link ; S'il vous plaît, passez par là. Voyez-le en action codepen . En lisant l'article ci-dessus, j'ai également créé un violon de démonstration .

Avec seulement trois lignes de CSS (à l'exclusion des préfixes fournisseurs), nous pouvons le faire à l'aide d'une transformation: translateY centre verticalement tout ce que nous voulons, même si nous ne connaissons pas sa hauteur.

La transformation de propriété CSS est généralement utilisée pour la rotation et la mise à l'échelle des éléments, mais avec sa fonction translateY, nous pouvons désormais aligner verticalement les éléments. Habituellement, cela doit être fait avec le positionnement absolu ou la définition des hauteurs de ligne, mais celles-ci exigent que vous connaissiez la hauteur de l'élément ou que vous travailliez uniquement sur du texte à ligne unique, etc.

Donc, pour ce faire, nous écrivons:

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

C'est tout ce dont tu as besoin. C'est une technique similaire à la méthode absolue-position, mais avec l'avantage que nous n'avons pas à définir n'importe quelle hauteur sur l'élément ou position-propriété sur le parent. Il fonctionne tout droit sorti de la boîte, même dans Internet Explorer 9 !

Pour le rendre encore plus simple, nous pouvons l'écrire en mixin avec ses préfixes de fournisseurs.


Une autre façon (pas encore mentionné ici) est avec Flexbox .

Ajoutez simplement le code suivant à l'élément conteneur :

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Démo Flexbox 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

Alternativement, au lieu d'aligner le contenu via le conteneur , la flexbox peut également centrer l' élément flexible avec une marge automatique lorsqu'il n'y a qu'un seul élément flexible dans le conteneur flexible (comme l'exemple donné dans la question ci-dessus).

Donc, pour centrer l'élément flexible à la fois horizontalement et verticalement, il suffit de le définir avec la margin:auto

Démo Flexbox 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: Tout ce qui précède s'applique aux éléments de centrage en les plaçant en rangées horizontales . C'est également le comportement par défaut car, par défaut, la valeur de flex-direction est row . Si, toutefois, des éléments flexibles doivent être disposés dans des colonnes verticales, la colonne flex-direction: column doit être définie sur le conteneur pour définir l'axe principal comme colonne et les propriétés justify-content et align-items fonctionnent également pour l'autre contourner avec justify-content: center centrer le justify-content: center verticalement et align-items: center centrer le align-items: center horizontalement)

flex-direction: column démo de flex-direction: column

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Un bon endroit pour commencer avec Flexbox pour voir certaines de ses fonctionnalités et obtenir la syntaxe pour un soutien maximal du navigateur est flexyboxes

En outre, le support du navigateur est très bon aujourd'hui: caniuse

Pour la compatibilité entre navigateurs pour l' display: flex et align-items , vous pouvez utiliser ce qui suit:

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

Une solution très simple et très puissante pour aligner verticalement le centre:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}
<div class="outer-div">
  <span class="inner">No data available</span>
</div>


Vous pouvez essayer cette approche de base:

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

Cela ne fonctionne que pour une seule ligne de texte, car nous définissons la hauteur de la ligne à la même hauteur que l'élément de boîte conteneur.

Une approche plus polyvalente

C'est une autre façon d'aligner le texte verticalement. Cette solution fonctionnera pour une seule ligne et plusieurs lignes de texte, mais nécessite toujours un conteneur à hauteur fixe:

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>

Le CSS taille juste le <div> , le centre verticalement aligne le <span> en définissant la hauteur de ligne de <div> égale à sa hauteur, et fait du <span> un bloc en ligne avec vertical-align: middle . Ensuite, il rétablit la hauteur de la ligne à la normale pour le <span> , de sorte que son contenu circule naturellement à l'intérieur du bloc.

Simuler l'affichage de la table

Et voici une autre option, qui peut ne pas fonctionner sur les navigateurs plus anciens qui ne supportent pas l' display: table et display: table-cell (fondamentalement juste Internet Explorer 7). En utilisant CSS, nous simulons le comportement de la table (puisque les tables supportent l'alignement vertical), et le HTML est le même que le second exemple:

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>

Utilisation du positionnement absolu

Cette technique utilise un élément positionné absolument en haut, en bas, à gauche et à droite de 0. Il est décrit plus en détail dans un article de Smashing Magazine, Centrage horizontal et vertical absolu en CSS .


Vous pouvez facilement le faire en ajoutant le code CSS suivant:

display: table-cell;
vertical-align: middle;

Cela signifie que votre CSS ressemble finalement à:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>


essayez le code suivant:

affichage: table-cellule; vertical-align: milieu;

div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
</div>


Approche flexible

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>


.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>


<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>






vertical-alignment