Html 设置文本的垂直位置有问题

我一直在尝试复制这张图片，这是一个中文论坛上的导航栏。这幅画是用中文写的，但我相信你应该能理解这一点。简而言之，文本不是垂直居中，而是靠近上边框2px。我尝试为它设置行高，但这样做会使文本垂直居中。有人知道如何调整文本以“向上移动”一点吗？多谢各位

以下是我编写的代码：

#框{
宽度：280px；
背景色：#333；
边框底部：1px点#fff；
}
.内容{
/*高度：30px*/
边框顶部：1个点#fff；
文本对齐：左对齐；
字体：14px/30px“宋体";
颜色：#fff；
}

练习1.
课程大纲
妙味视频
妙味论坛

刚刚将

位置：相对；

和

顶部：-2px；

添加到您的

。内容

css:

#框{
宽度：280px；
背景色：#333；
边框底部：1px点#fff；
}
.内容{
/*高度：30px*/
边框顶部：1个点#fff；
文本对齐：左对齐；
字体大小：14px/30px“宋体";
颜色：#fff；
位置：相对位置；
顶部：-2px；
}

练习1.
课程大纲
妙味视频
妙味论坛

刚刚将

位置：相对；

和

顶部：-2px；

添加到您的

。内容

css:

#框{
宽度：280px；
背景色：#333；
边框底部：1px点#fff；
}
.内容{
/*高度：30px*/
边框顶部：1个点#fff；
文本对齐：左对齐；
字体大小：14px/30px“宋体";
颜色：#fff；
位置：相对位置；
顶部：-2px；
}

练习1.
课程大纲
妙味视频
妙味论坛

也许您可以使用CSS3 Flexbox模块。只需使用

.content

选择器即可

#框{
宽度：280px；
背景色：#333；
边框底部：1px点#fff；
}
.内容{
高度：30px；
显示器：flex；
弯曲方向：行；
/*如果“弯曲方向”为“行”，则垂直居中*/
/*如果弯曲方向为柱状，则水平居中*/
对齐项目：居中；
/*如果弯曲方向为行，则水平居中*/
/*如果弯曲方向为柱状，则垂直居中*/
/*证明内容：中心*/
边框顶部：1个点#fff；
文本对齐：左对齐；
字体：14px/30px“宋体";
颜色：#fff；
}

课程大纲
妙味视频
妙味论坛

也许您可以使用CSS3 Flexbox模块。只需使用

.content

选择器即可

#框{
宽度：280px；
背景色：#333；
边框底部：1px点#fff；
}
.内容{
高度：30px；
显示器：flex；
弯曲方向：行；
/*如果“弯曲方向”为“行”，则垂直居中*/
/*如果弯曲方向为柱状，则水平居中*/
对齐项目：居中；
/*如果弯曲方向为行，则水平居中*/
/*如果弯曲方向为柱状，则垂直居中*/
/*证明内容：中心*/
边框顶部：1个点#fff；
文本对齐：左对齐；
字体：14px/30px“宋体";
颜色：#fff；
}

课程大纲
妙味视频
妙味论坛

位置：相对；顶部：-2px；

或

转换：translateY（-2px）；

？没有孤立的问题代码没有帮助。向我们展示与您试图集中的内容相对应的HTML和CSSplease@Gropai如果您接受了答案，则向上投票是正确的选择：-）

位置：相对；顶部：-2px；

或

转换：translateY（-2px）；

？没有孤立的问题代码没有帮助。请向我们展示与您试图集中的内容相对应的HTML和CSSplease@Gropai如果你接受了答案，那就投赞成票吧：-）