Vertically Align Arbitrary Length String Relative To Image

When cod­ing web pages, a com­mon prob­lem is align­ing (link) text ver­ti­cally, often in rela­tion to an icon. This is eas­ily accom­plished by set­ting height and line-height equal and by adding padding for the icon which is set as the background-image cen­tered vertically.

<style>
a {
  background:url('16x16icon.png') no-repeat left center;
  display:block;
  height:16px;
  line-height:16px;
  padding-left:20px;
}
</style>
<a href="#">Link Text</a>

But what if the link text needs to span more than one line for the given width? What if the icon is taller than the text height?

(more…)