css - リンクのリスト内のアイコンとテキストを揃える (css)

Question

みんな。しばらくこれを探していましたが、答えが見つかりません..

私が欲しいのは、リンク付きのヘッダーがあり、画像、テキスト、およびその後にテキストを含む画像を含めることができ、それらを水平に揃えることです..

問題は、テキストが常にその後の画像に埋もれてしまうことです..

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

コードは次のとおりです。

http://jsfiddle.net/fAFZ9/

私が望むのは、「テキストのみのリンク」にカーソルを合わせて、他のリンクと同じにすることです..つまり、メニューの上部に配置し、テキストを中央に配置します..

誰かがこれで私を助けてくれることを願っています..

Answer 1

CSSフィドルhttp://jsfiddle.net/fAFZ9/6/を更新しました。今は完璧です;）