Question

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

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;
}

Answer 1

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

DEMO

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

}

Answer 2

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

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

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

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

Answer 3

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

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

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

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

3 个答案: