Выравнивание значков с текстом

Question

Я спрашивал об этом раньше, но не смог решить, поэтому снова спрашиваю.

Я пытаюсь выровнять значки (слева) из вертикального спрайта с текстом (справа). Я бы хотел, чтобы текст и значки снизу были выровнены независимо от размера значка и текста, т. Е. Текст мог быть h1 или h5. Размер значка остается в основном одинаковым при 25 пикселях.

В данный момент я использую следующую CSS.

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

Но я не могу заставить значок выровняться с текстом справа без возни с фоновым положением значка. В идеале я бы предпочел не делать этого, а просто использовать в классе css один и тот же значок независимо от размера текста рядом с ним.

Answer 1

Что вы можете сделать, это вместо этого разместить класс "icons1 tree_icon" на h1. Таким образом, у вас нет дополнительной сложности наличия дополнительного элемента span там (что вызывает проблемы с вертикальным выравниванием с элементами рядом с ним).

Вы должны иметь возможность всегда вертикально центрировать фон на h1. Вам может даже не понадобиться класс .tree_icon.

Answer 2

Вы пытались поставить свой диапазон перед H1 и оставить его плавающим?