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

只需添加

line-height: 45px;

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

Answer 2

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

demo

Answer 3

我已将CSS更改为小提琴http://jsfiddle.net/fAFZ9/6/。它现在很完美;）

对齐链接列表中的图标和文本（css）

3 个答案: