修复导航栏中链接的垂直对齐方式

时间:2014-11-25 10:13:36

标签: html css twitter-bootstrap

我想在导航中为链接添加图标,我需要为它们使用不同的尺寸。但是当我使用不同的字体大小时,垂直对齐并不起作用。 为什么会发生这种情况?我该如何解决?

HTML

<nav id="top" class="menu">
<div class="container">
   <div id="top-links" class="collapse navbar-collapse">
     <ul class="nav navbar-nav navbar-right">
      <li class="dropdown"><a><i class="dif-size">! </i>text</a></li>
      <li class="dropdown"><a>text</a></li>
      <li class="dropdown"><a>text</a></li>
    </ul>
  </div>
</div>

CSS

.menu {
  background-color:black;
  color:#ffffff;
  padding: 0 0 0 0;
  position: relative;
  width: 100%;
}

.menu li a {
  display: inline-block;
  vertical-align: bottom;
}


.dif-size {
  font-size:30px; 
}

.menu a:hover, a:focus{
  background-color:rgba(20, 255, 20, .7) !important;
}

3 个答案:

答案 0 :(得分:1)

我认为你需要的是中间对齐而不是底部

DEMO

.menu li a, .menu li i  {
  display: inline-block;
  vertical-align: middle;

}

答案 1 :(得分:0)

要解决此问题,您必须使用vertical-align css property

当你为font-size指定不同的值时,它们自然会在该空间中占据不同的像素值。如果它们全部在同一元素内对齐,它们看起来就像它们在不同的行中一样多次他们看起来很扭曲。

即:如果你有两个图标在同一个容器中对齐,并给出font-size:13px;到第一个元素和font-size:11px;对于第二个元素,最小的一个像素看起来不会因为它的高度缩短2px。在这种情况下,如果你给vertical-align:1px;对于第二个图标,它将看起来与第一个图标相关。

如果您使用的字体大小与字形的原始图纸尺寸不同且不成比例,则可以看到扭曲。

答案 2 :(得分:0)

添加line-height属性解决了这个问题。

.menu li a, .menu li i  {
  display: inline-block;
  vertical-align: middle;
  line-height: 25px;
}

示例:http://www.bootply.com/pax5pUk4Br