css alignement vertical d'une ou plusieurs lignes

Question

J'ai un titre qui peut avoir une ou plusieurs lignes.

Comment puis-je aligner le texte verticalement ? S'il s'agissait toujours d'une ligne, je pourrais simplement définir la hauteur de ligne sur la hauteur du conteneur.

Je peux le faire en utilisant JavaScript, mais je n'aime pas vraiment cela, je cherche une méthode purement CSS.

De plus, si le conteneur pouvait s'étendre avec les lignes, ce serait parfait, de sorte que je puisse toujours avoir le même rembourrage en haut et en bas.

Answer 1

Pour cela, vous pouvez utiliser display:table-cell propriété :

.inline {
  display: inline-block;
  margin: 1em;
}
.wrap {
  display: table;
  height:  100px;
  width:   160px;
  padding: 10px;
  border:  thin solid darkgray;
}
.wrap p {
  display:        table-cell;
  vertical-align: middle;
}

<div class="inline">
  <div class="wrap">
    <p>Example of single line.</p>
  </div>
</div>

<div class="inline">
  <div class="wrap">
    <p>To look best, text should really be centered inside.</p>
  </div>
</div>

Mais il fonctionne avec IE8 et plus. Lisez cet article pour plus d'informations : Trucs et astuces CSS : Centrer verticalement du texte multiligne .

Answer 2

Si vous n'aimez pas le display:table astuce (je sais que je n'en ai pas) voici une solution sans elle :

.cen {
  min-height:5em; width:12em; background:red; margin:1em 0;
}
.cen p {
  display:inline-block; vertical-align:middle;
  margin:0 0 0 1em; width:10em;
}
.cen::after {
   display:inline-block; vertical-align:middle; line-height:5em;
   width:0; content:"\00A0"; overflow:hidden;
}

avec HTML

<div class="cen">
 <p>Text in div 1</p>
</div>

Cela donne à la division une hauteur de 5em, sauf si le contenu est plus élevé, auquel cas elle s'agrandit.
Exemple concret aquí .

Edit : Oh, sur quels navigateurs c'est censé fonctionner ? IE8 ne coopère pas.

(Modification ultérieure : mise à jour du CSS pour gérer les problèmes dans Chrome)

Answer 3

J'aime beaucoup cette solution :

<div>
    <span style="display: inline-block; vertical-align: middle; height: --The height of your box here--"></span>
    <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>

N'hésitez pas à utiliser des feuilles de style, et 100% pour la hauteur...

Il faudra peut-être aussi commenter les espaces entre les balises span, puisqu'il s'agit de blocs inline.

Le mérite revient à Hadès . Je l'ai obtenu de Ici

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here.</span>
</div>

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here.</span>
</div>

Nota: Cela ne semble pas fonctionner avec un contenu à lignes multiples.

Answer 4

Quelque chose comme ça

HTML

<div>
    <p>
       Lorem Ipsum is simply
    </p>
</div>

CSS

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

Answer 5

En ce qui concerne le style, un tableau serait la meilleure façon de présenter votre contenu (mettez les balises de style dans le CSS) :

<table style="border:1;collapse;width:300px;padding:5px;background-color:red;">
<tr>
    <td style="width:250px;vertical-align:middle;">Lorem ipsum dolor sit amet ipswum dolor</td>
    <td style="width:50px;vertical-align:top;color:white;">1 Line</td>
</tr>

Le comptage des lignes nécessitera un JS script, regardez ici :

http://www.webdeveloper.com/forum/archive/index.php/t-44333.html