Si vous n’aimez pas l’ display:table astuce (je sais que je ne sais 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

 
 
Text in div 1
  

Cela donne au div une hauteur de 5em, sauf si le contenu est plus élevé, alors il grandit.
Exemple en direct ici .

Edit: Oh, sur quels navigateurs est-ce censé fonctionner? IE8 ne va pas coopérer.

(Édition ultérieure: CSS mis à jour pour gérer les problèmes dans Chrome)

J’aime beaucoup cette solution:

 
  Put your multi-line content here  

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

Peut aussi avoir à commenter des espaces entre les balises span, car ce sont des blocs en ligne

Le crédit va à Hadès . Je l’ai eu d’ ici

 
  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. Put your multi-line content here.  

quelque chose comme ça

HTML

 
 
 Lorem Ipsum is simply 
  

CSS

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

Si vous voulez que votre texte soit réactif, envelopper des mots de une à plusieurs lignes à mesure que la largeur change dynamicment, cela peut être insuffisant, car .inlinehelper peut pousser du texte sous lui-même.
Voici une solution complète pour une tâche aussi simple:

HTML:

CSS:

 #responsive_wrap { display: block; height: 100%; //dimensions just for width: 100%; //example's sake white-space: nowrap; } #content { display: inline-block; white-space: initial; } .inlinehelper { height: 100%; width: 0; vertical-align: middle; display: inline-block; } 

Notez la propriété white-space:nowrap , qui empêche que .inlinehelper et #content se #content par rapport à l’autre. white-space:initial sur #content réinitialise la capacité à envelopper pour span elle-même;

Une autre option: plus une question de préférence personnelle. Vous pouvez utiliser un pseudo-élément au lieu de .inlinehelper . Supprimez les règles et l’élément .inlinehelper css et ajoutez ce pseudo-élément css selector:

 #responsive_wrap:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; width: 0px; } 

PS: Je me suis rendu compte que cette question est vraiment trop ancienne, alors laissez-moi vous répondre, peut-être que ce sera utile pour quelqu’un.

En termes de style, un tableau serait le meilleur moyen de mettre en page votre contenu (placez les tags de style dans CSS):

 
 
 
Lorem ipsum dolor sit amet ipswum dolor
 
1 Line
  

Le nombre de lignes nécessitera un script JS, regardez ici:

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

J’aime ce genre de solution. J’ai vu quelque part cette astuce dans stackoverflow mais ne me souviens plus où exactement. Très utile! 🙂

 ul { background: #000; padding-left: 0; } ul li { height: 130px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 3px solid #F7F7F7; } ul li:last-of-type { border-bottom: none; } ul li:after { color: #333; position: absolute; right: 35px; font-size: 40px; content: ">"; top: 50%; margin-top: -24px; color: #FFDA00; -webkit-transition: 0.25s all ease; transition: 0.25s all ease; } ul li a { font-size: 35px; font-family: Arial; color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 40px; height: 100%; line-height: 38px; display: inline-block; width: 100%; text-align: left; text-decoration: none; } ul li a:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } ul li a span { display: inline-block; vertical-align: middle; } 

 
 
  Lorem ipsum 1 LINE 
 
 Lorem ipsum 
 2 lines