Mam pewien problem z wyrównaniem linków osadzonych w <H2> do środka obrazka, w pionie.



Jak widać na obrazku, ikonki znajdują się tuż obok znaczników H2 i są osadzone jako zwykły obrazek <img>. Próbowałem nadawać dla H2 line-height oraz vertical-align, ale niestety to nie pomogło. Kombinowałem także z użyciem margin-bottom, ale ta metoda również nie przyniosła zamierzonego efektu. Macie może jakieś pomysły?

Kod:

  1. <div id="postfooter">
  2.  
  3. <div id="postfooter-info">
  4. <img src="wp-content/themes/colorfolio/images/kategoria.png" alt="kategoria" /><h2><?php the_category(' '); ?></h2>
  5. <img src="wp-content/themes/colorfolio/images/tag.png" alt="tagi"/><h2><?php the_tags(''); ?></h2>
  6. </div>
  7.  
  8. </div>


css:
  1. #postfooter{
  2. background-color: #FAFAFA;
  3. width: 624px;
  4. margin-left: 3px;
  5. border: 1px solid #f1f1f1;
  6. color: #cacaca;
  7. font-size: 10px;
  8. font-family: verdana;
  9. height: 150px;
  10. }
  11.  
  12.  
  13. #postfooter img{
  14. border: 0;
  15. }
  16.  
  17. #postfooter a:link, #postfooter a:visited, #postfooter a:active{
  18. text-decoration: none;
  19. color: inherit;
  20. font-size: inherit;
  21. }
  22.  
  23. #postfooter a:hover{
  24. color: #818181;
  25. }
  26.  
  27. #postfooter-info h2{
  28. font-weight: normal;
  29. display: inline;
  30. }
  31.  
  32. #postfooter-info{
  33.  
  34. }
  35.  
  36. #postfooter-info img{
  37. padding-right: 10px; padding-left: 10px;
  38. }


Liczę na Waszą pomoc.

EDIT: tuż po napisaniu postu udało mi się rozwiązać problem. Do klasy obrazka trzeba było dodać vertical-align: middle, a potem to samo do H2 i jeszcze dodatkowo line-height: 25px. Ostatecznie efekt jednak mi się nie podobał, więc do obrazka dorzuciłem jeszcze margin-bottom i wszystko już działa tak, jak chciałem.