Html 图标字体未与文本垂直居中

我在

nav

列表中使用图标字体，我希望文本位于两个图标之间。问题是图标和文本不匹配。图标区域明显高于文本，因此当它们都在基线上时，图标会高得多。是否有任何解决方案可以通过将文本放入

span

？我已尝试调整我知道的每个参数：

HTML:

---

您可以使用

行高

。例如： HTML:

---

我要说的是，我们需要首先重置样式，因为这里涉及的标签（

h2

，

p

）在浏览器上具有不同的行为

为了克服这个问题，我使用了旧技术。设置边距和填充以重置样式

CSS:

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>


图标字体FTW



---

请检查我的答案，这给了我很好的结果。

给他们

显示：内联块

，

边距

，

行高

e.t.c。他们都有。CSS正在重置CSS时，CSS没有声明

span

为内联块元素。这也是我的意思，但它没有效果。你能给你的字体一个链接吗？我将在jsfiddle上进行测试。我认为这里真正的关键是

vertical align:middle

，我以前没有用过。非常感谢。（同时，感谢您对另一张海报的建议）非常欢迎：）--是的，v-align在这种情况下总是有用的。只要确保它转到目标元素的父元素：）

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

nav li {
    display: inline-block;
}

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

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

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

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