How to vertical-align text that runs multiple lines

Question

I realise there have probably been a few questions with a title similar to this, but I think my question is a little different, I've tried to do some background reading and can't seem to find an elegant solution to this anywhere (although that's possibly because one doesn't exist)

Basically, I have three boxes, each with an image to the left, and some text in them, the problem is getting the text to vertical-align, having done some background reading on how vertical-align actually works (I wasn't entirely sure before) I tried implementing it to solve the problem, and it works perfectly well on all but one of the boxes, you'll see what I mean in the demo below:

http://jsfiddle.net/5vxSP/1/

The last box has a second line of text, and this line just ends up below the image, there are a few ways I can think of doing this, but most involve using a float for the image, and margins for the text of the last box, which, whilst working isn't a particularly nice way of doing it (well, I think so anyway . . .)

Is there an elegant way of doing this, so that the text will remain in the middle of the box regardless of the number of lines / font-size that I decide on using?

If I have to use my original solution I'm happy doing that, I was just interested to see if there was a better way of doing this that I have yet to discover.

Answer 1

HTML is very shoddy when it comes to vertical-align. The only way I've found to reliably do this is to do as follows...

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

vertical-align in CSS aligns the inline element it is applied to with other inline elements around it. Only on tables does it align within the table cell.

Answer 2

Based on a proposed a solution for a similar problem here, you can do something like this.

1. Put the link texts inside spans.
2. Give these spans display:inline-block and the proper widths; which are the original widths of the li items minus the images and the paddings.

.main-services {
  overflow: auto;
  padding: 17px 0 9px 0;
}
.main-services li {
  list-style: none;
  float: left;
  border-right: 1px dashed #E53B00;
  padding-right: 14px;
}
.main-services li a {
  display: block;
  height: 78px;
  color: #ED5D04;
  text-decoration: none;
}
.main-services li a img {
  vertical-align: middle;
}
.main-services li a span {
  display: inline-block;
  vertical-align: middle;
}
.service-1 span { width: 85px; }
.service-2 span { width: 131px; }
.service-3 span { width: 151px; }

<ul class="main-services border-common">
  <li class="service-1">
    <a href="#">
      <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
      <span>Some text goes here</span>
    </a>
  </li>
  <li class="service-2">
    <a href="#">
      <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
      <span>More text here</span>
    </a>
  </li>
  <li class="service-3">
    <a href="#">
      <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
      <span>More text goes here but this text overruns</span>
    </a>
  </li>
</ul>

Or check out the update to the fiddle (including the original reset stylesheet): http://jsfiddle.net/MrLister/5vxSP/15/

Note: this won't work in IE8.