Html 如何相对于按钮垂直居中导航栏标题

我不知道如何垂直居中导航栏标题

在下面的示例中（请参见链接），我希望降低“标题”，使其在粘性导航栏内垂直居中

任何帮助都将不胜感激

• 杰西

html，
身体{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
背景：白色；
颜色：黑色；
}
钮扣{
保证金：0；
填充：0；
背景：无；
边界：0；
}
按钮：焦点{
大纲：0；
}
导航{
保证金：0；
填充：0；
宽度：100%；
溢出：隐藏；
背景颜色：黄色；
边框底部：薄橙色固体；
文本对齐：居中；
}
坚持{
位置：固定；
排名：0；
左：0；
}
导航ul{
列表样式：无；
保证金：0；
填充：0；
宽度：100%；
}
李国荣{
显示：内联；
}
nav ul li h1{
显示：内联；
}
导航ul li h1.navTitle{
/*这里是什么使标题垂直居中*/
}
导航ulli按钮{
保证金：0；
填充：12px；
}
导航ulli按钮：焦点{
背景颜色：紫色；
}
导航ul li按钮：激活{
背景颜色：绿色；
}
nav ul li按钮。NAVTBNLEFT{
浮动：左；
}
nav ul li按钮。NAVTBNRIGHT{
浮动：对；
}

标题

编辑：

---

如果您不想硬编码，可以使用表格单元格，下面是我的意思示例：

您可以将导航设置为显示：table；然后使用垂直到中间：

.stickyNav li
{
   display:table-cell;
}

.titleClass
{
   vertical-align:middle;
}

我还没有测试过这个，但它在大多数情况下都应该有效。除非您必须对旧浏览器进行大量兼容性测试

---

然后你可以像上面的答案一样硬编码。

如果你在

nav

上设置

行高

，标题将自动居中。你可以摆脱浮动和一系列其他规则，只需使用flexbox即可：使用这种方法，你可以保持简单，垂直居中也很容易。有没有办法在不知道导航栏高度的情况下实现这一点？我想不惜一切代价避免神奇的数字。谢谢帕特！改变线的高度显然是比较容易的解决办法。

.stickyNav li
{
   display:table-cell;
}

.titleClass
{
   vertical-align:middle;
}