对齐链接列表中的图标和文本 (css)答案

【问题标题】：Align icons and text in a list of links (css)对齐链接列表中的图标和文本 (css)
【发布时间】：2013-09-27 08:31:39
【问题描述】：

每个人。找了好久没找到答案。。

我想要的是，有一个带有链接的标题，它可以有图像、文本和图像，后面有文本，并将它们水平对齐..

问题是，文本总是被它后面的图像压倒......

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

我想要的是，将鼠标悬停在“纯文本链接”上，使其与其他链接相同。也就是说，与菜单顶部对齐，并使文本居中..

希望有人能帮我解决这个问题..

【问题讨论】：

标签： css image menu text-align

【解决方案1】：

只需添加

line-height: 45px;

到 li 元素： http://jsfiddle.net/fAFZ9/1/

【讨论】：

【解决方案2】：

将display: table-cell; vertical-align: middle; 添加到您的.header_wrap ul li a

demo

【讨论】：

【解决方案3】：

我已在小提琴 http://jsfiddle.net/fAFZ9/6/ 中更新了您的 CSS。现在完美了;)

【讨论】：