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.