css single or multiple line vertical align

Question

I have a title that can have one or more lines.

How can I align the text vertically? If it was always one line I could just set the line-height to the container height.

I can do it using JavaScript, but I don't really like it, I'm searching for a pure CSS way.

Also if the container could expand with the lines it would be perfect, so I can always have the same padding on the top and bottom.

Answer 1

For this you can use display:table-cell property:

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

But it works IE8 & above. Read this article for more info: CSS Tricks: Vertically Center Multi-Lined Text.

Answer 2

If you don't like the display:table trick (I know I don't) here's a solution without it:

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

with HTML

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

This gives the div a height of 5em, unless the content is heigher, then it grows.
Live example here.

Edit: Oh, which browsers is this supposed to work on? IE8 won't cooperate.

(Later edit: updated CSS to handle issues in Chrome)