在html5中居中导航'；它的反应和使用边界

我已经找到了很多方法来中心导航使用技巧。通过将线条高度和高度设置为彼此相等，或使用“垂直对齐显示：表格”。它起作用了，但是我的边框总是出现在容器的底部，而不是文本

*{
边际：0px；
填充：0px；
}
标题{
显示：块；
高度：100px；
背景颜色：蓝色；
}
导航{
高度：自动；
宽度：100%；
显示：块；
}
导航a{
身高：100%；
文本对齐：居中；
显示：内联块；
文字装饰：无；
颜色：黑色；
左边距：25px；
字体大小：25px；
}
导航a：悬停{
边框底部：3px实心#F3008A；
}
}

---

您需要删除

显示：内联块并给出
行高
。它会解决你的问题

检查以下更新的代码：


*{
边际：0px；
填充：0px；
}
标题{
显示：块；
高度：100px；
背景颜色：蓝色；
}
导航{
高度：自动；
宽度：100%；
}
导航a{
身高：100%；
文本对齐：居中；
线高：100px；
文字装饰：无；
颜色：黑色；
左边距：25px；
字体大小：25px；
}
导航a：悬停{
边框底部：3px实心#F3008A；
}
}
您可以使用表格单元格显示垂直对齐方法


*{
边际：0px；
填充：0px；
}
标题{
显示：表格；
宽度：100%；
高度：100px；
背景颜色：蓝色；
}
导航{
高度：自动；
宽度：100%；
显示：表格单元格；
垂直对齐：中间对齐
}
导航a{
文本对齐：居中；
显示：内联块；
文字装饰：无；
颜色：黑色；
左边距：25px；
字体大小：25px；
位置：相对位置；
底部边框：3倍纯蓝；
}
导航a：悬停{
边框底部：3px实心#F3008A；
}
试着使用
：之前，就像我做的那样，因为您的导航高度是固定的，所以不会有问题



*{
边际：0px；
填充：0px；
}
标题{
显示：块；
高度：100px；
背景颜色：蓝色；
}
导航{
身高：100%；
宽度：100%；
显示：表格；
}
导航a{
身高：100%；
文本对齐：居中；
显示：内联块；
文字装饰：无；
颜色：黑色；
左边距：25px；
字体大小：25px；
显示：表格单元格；
垂直对齐：中间对齐；
}
导航a:悬停：之前{
背景色：#F3008A；
职位：绝对职位；
宽度：50px；
内容：“；
高度：3倍；
位置：绝对位置；
z指数：4；
顶部：64px；
}
我认为最好使用flexbox，因为它既现代又灵敏。以下内容在所有相对现代的浏览器中都能很好地工作


nav{
显示：-webkit flex；
显示器：flex；
}
导航>分区{
背景颜色：粉红色；
高度：40px；
-webkit-flex:1；
弹性：1；
显示：-webkit flex；
显示器：flex；
-webkit内容：中心；
论证内容：中心；
-webkit对齐项目：居中；
对齐项目：居中；
}
导航>分区：第n个子（奇数）{
背景色：红色；
}
导航>分区>a{
文本对齐：居中；
-webkit-flex:1；
弹性：1；
}

那么您想在
中垂直居中
？当你说在文本底部添加边框时，你是指锚吗？即
文本装饰：下划线在
上？不清楚您在问什么，但代码似乎建议您将
标记置于导航的中心位置？是的，我只希望文本位于标题的中心。这对于响应来说是失败的。