图标字体不是垂直居中的文本

Question

我在nav列表中使用图标字体，我希望文本位于两个图标之间。问题是图标和文字不匹配。图标区域明显高于文本，因此当它们都在基线上时，图标会更高。通过将文本放在span中，我可以使用任何解决方案吗？我试过调整我知道的每个参数：

HTML：

<nav class="nav">
    <ul>
        <li><span data-icon="&#xE603;"></span><h2>HOME</h2></li>
        <li><p>ICON FONT FTW</p></li>
        <li><span data-icon="&#xE603;"></span><h2>ABOUT</h2></li>
        <li><span data-icon="&#xE603;"></span><h2>CONTACT</h2></li>
    </ul>
</nav>

CSS：

nav {
    font-size: 1.2em;
    background: gray;
    text-align: center;
}
nav li:first-child {
    display: inline-block;
}

nav li {
    display: inline-block;
}

Answer 1

我会说我们需要首先重置样式，因为我们涉及的标签（h2，p）与浏览器有不同的行为。

为了克服这一点，我实施了旧技术。设置边距和填充以重置样式。

CSS：

nav {
    font-size: 1.2em;
    background: gray;
    text-align: center;
    padding:0;margin:0;
}
nav li:first-child {
    display: inline-block;
}
nav li {
    position:relative;
    display: inline-block;
    vertical-align:middle;
}
nav h2,nav div{
    position:relative;
    display:inline-block;height:100%;width:100%;
    padding:0;
    margin:20px auto;
}
nav h2{
}
nav div{
}

HTML：已经改变了一点，以便看到小提琴中的图标。

<nav class="nav">
    <ul>
        <li><span data-icon="&#xE603;"></span><h2>&#xE603;</h2></li>
        <li><div>ICON FONT FTW</div></li>
        <li><span data-icon="&#xE603;"></span><h2>&#xE603;</h2></li>
        <li><span data-icon="&#xE603;"></span><h2>&#xE603;</h2></li>
    </ul>
</nav>

请检查我的fiddle这会给我带来很好的结果。

Answer 2

您可以使用line-height。例如： HTML：

<nav class="nav">
    <ul>
        <li><span data-icon="&#xE603;"></span><h2>HOME</h2></li>
        <li><p class="lineHeight">ICON FONT FTW</p></li>
        <li><span data-icon="&#xE603;"></span><h2>ABOUT</h2></li>
        <li><span data-icon="&#xE603;"></span><h2>CONTACT</h2></li>
    </ul>
</nav>

CSS：

nav {
    font-size: 1.2em;
    background: gray;
    text-align: center;
}
nav li:first-child {
    display: inline-block;
}

nav li {
    display: inline-block;
}

.lineHeight{
line-height: 1.3em;
}