0

每个人。一直在寻找这个问题，但我找不到答案..

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

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

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

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

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

4

3 回答 3

2

只需添加

line-height: 45px;

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

于 2013-09-22T09:41:58.203 回答
0

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

演示

于 2013-09-22T09:50:28.760 回答
0

我已经更新了你CSS的小提琴http://jsfiddle.net/fAFZ9/6/。它现在很完美；）

于 2013-09-22T11:17:01.560 回答