小编Mik*_*keP的帖子

我正在建立一个网站,我希望在视觉上有一排字体真棒图标看起来具有相同的高度.这也意味着我希望他们都坐在同一个基线上.

由于图标的性质是具有不同宽高比的不同形状,当您在同一行上放置具有相同字体大小或fa-2x(等)的字体真棒图标时,它们的高度和基线不会水平排列.事实上,我已经注意到,图标如何垂直排列在彼此旁边的行中似乎没有多少默认值.有些人以随机高度坐在基线上方.此外,在相同的大小或字体大小下,图标在视觉上看起来在尺寸上会有很大差异.例如移动电话图标与麦克风.

关于手机图标的奇怪之处在于它是如何漂浮在基线之上的,因为它似乎有一个内置填充,我似乎无法找到覆盖的方法.使用vertical-align:baseline等没有帮助.

这是HTML:

          <div class="some-class">
            <i class="fa fa-microphone"></i><i class="fa fa-mobile-phone"></i>
            <h3>TEXT</h3>
          </div>
          <div class="some-class">
            <i class="fa fa-automobile"></i><i class="fa fa-cubes"></i>
            <h3>DIFFERENT TEXT</h3>
          </div>

CSS:

.some-class {
    float: left;
    height: 160px;
    padding: 15px;
    text-align: center;
}

任何人都知道一种正确的方法来将我的字体真棒图标与CSS对齐,这样当它们并排放置时,它们在视觉上看起来是完全相同的高度？