Archive for December, 2010

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.

a {
  background:url('16x16icon.png') no-repeat left center;
<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?