Html ul a li中垂直居中的文本

所以，很明显，我似乎不明白为什么李里面的文字一直粘在它的顶部。。。我试过玩高度、线条高度、垂直对齐、显示表格、表格单元格、内联块、内联。。。所有这些，但我知道为什么，我看不出有什么问题

jsFiddle-

HTML

---

提前感谢您。

这里有一种方法可以通过嵌入li标签的a标签来实现：

标题{ 背景：eee； 颜色：333； 高度：100px； 宽度：100%； 顶部：0px； 保证金：0px 0px 10px 0px； 字号：26pt； 位置：相对位置； z指数：100； 过渡：所有0.1秒； } 头饰{ 位置：绝对位置； 底部：15px； 左：10px； } 校长{ 位置：绝对位置； 边框：1px蓝色虚线； 字号：16pt； 右：15%； 身高：100%； 线高：1； 底部：0px； 边际：0px； 填充：0px； } 李校长{ 浮动：左； 显示：表格； 边框：1px纯红； 身高：100%； 利润率：0 20px；/*可选，取决于您的布局*/ } 校长{ 显示：表格单元格； 垂直对齐：中间对齐； 边框：1px红色虚线； 身高：100%； 填充：0 20px； } 标题

---

有什么特别的原因让你把a标签挂在li上吗？这不是严格有效的HTML。你能把a标签放在li标签里吗？我这样做的唯一原因是整个li是一个可点击的链接，而不仅仅是单词本身@MarcAudetThanks！这有点愚蠢，但我没有想到增加a的维度，因为我太专注于保持它在那个位置，以便让它以我想要的方式工作。。。不管怎样，它工作得很好。谢谢。这个看起来简单的布局比看起来要难一点，我试了几次才弄清楚。顺便说一句，这个问题与构建一个三列页面布局密切相关，其中三列占据最高列的高度。祝你一切顺利！

<header>
    <span id="headerTitle">Title</span>

    <ul id="headerMenu">
        <a href=""><li> Plugin </li></a>
        <a href=""><li> how-to </li></a>
        <a href=""><li> Docs   </li></a>
    </ul>
</header>

#headerMenu{
    position: absolute;
    border: 1px dashed blue;
    font-size: 16pt;
    right: 15%;
    height: 100%;
    line-height: 100%;
    bottom: 0px;
    margin: 0px;
    padding: 0px;
}

#headerMenu a{
    height: 100%;
    line-height: 100%;
}

#headerMenu a li{
    border: 1px solid red;
    float: left;
    list-style: none;
    height: 100%;
    line-height: 100%;
    padding: 0px 20px;
}