Aligning icons with text

Question

I have asked this before but couldn't get it resolved, so asking again.

I am trying to align icons (on the left) from a vertical sprite with text (on the right). I would like both text and icons bottom to be aligned regardless of the size of the icon and the text i.e. the text could be h1 or could be a h5. The icon size remains largely the same at 25px.

I am using the following css at the moment.

.icons1 {
  padding-left:40px;
  background: transparent url(icons1.png) no-repeat scroll left center;
  overflow: hidden; 
}

.tree_icon {
  background-position: -15px -12px; 
}

<div>
  <h1><span class="icons1 tree_icon"></span>Big header</h1>
</div>

But I can't get the icon to align with the text on the right, without messing around with the background position of the icon. Ideally I would rather not do it and just use on css class for the same icon regardless of the text size next to it.

Answer 1

What you can do is place the "icons1 tree_icon" class on the h1 instead. That way you don't have the added complexity of having an extra span element in there (which causes vertical alignment issues with elements next to it).

You should be able to always vertically center the background on the h1. You may not even need the .tree_icon class then.

Answer 2

Have you tried putting your span before your H1 and left-floating it?