Align icons and text in a list of links (css)

Question

everyone. Been searching for this for some time, but i cant find an answer..

What i want is, have a header with links, that can have image, text and image with text after it, and align them horizontaly..

The problem is, that the text is allways fushed down by the image after it..

.header_wrap {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    border-bottom: solid 1px grey;
    background: black;
  }
  .header_wrap ul {
    margin: 0;
    list-style: none;
  }
  .header_wrap ul li {
    display: inline-block;
  }
  .header_wrap ul li a {
    display: block;
    padding: 0 5px;
    text-decoration: none;
    height: 50px;
    color: white;
  }
  .header_wrap ul li a span {
    padding: 0 0 0 8px;
  }
  .header_wrap ul li a img {
    vertical-align: middle;
    padding: 3px 0 0 0;
    width: 45px;
    height: 45px;
  }
  .header_wrap ul li a:hover {
    background: grey;
  }


 <div class="header_wrap">
  <ul>
    <li class="img"><a href="#"><img src="http://goo.gl/KLntA5" alt=""/></a></li>
    <li class="img_txt"><a href="#"><img src="http://goo.gl/KLntA5" alt=""/><span>Link</span></a></li>
    <li class="txt"><a href="#">link</a></li>
    <li class="img"><a href="#"><img src="http://goo.gl/KLntA5" alt=""/></a></li>
    <li class="img_txt"><a href="#"><img src="http://goo.gl/KLntA5" alt=""/><span>Link</span></a></li>
    <li class="txt"><a href="#">link</a></li>
  </ul>
</div>

Here is the code:

http://jsfiddle.net/fAFZ9/

What i want is, to have a hover on the "text only link" to be the same as on other links.. That is, aligned to top of the menu and have the text centered..

Hope, someone will be able to help me with this..

Answer 1

simply add

line-height: 45px;

to the li element: http://jsfiddle.net/fAFZ9/1/

Answer 2

Add display: table-cell; vertical-align: middle; to your .header_wrap ul li a

demo

Answer 3

I have updated your CSS in fiddle http://jsfiddle.net/fAFZ9/6/ . Its perfect now ;)