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

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 и оставить его?