Html 当使用多种字体大小时，如何对齐div和按钮？

我需要有一个按钮，激活一个向下滑动菜单和一个div，其中有一个链接，在导航栏中，按钮和链接下面有一个名称和一小行文本。我希望这一小行文字的字体更小。如果我将文本行放在一个p标记中，并指定一个较小的字体，我就无法使文本在其中整齐对齐

我可以使用链接上的填充将其向下推，但当我开始使用媒体查询使内容变小时，它们会失去对齐。我也尝试过使用线条高度，但也有类似的问题。我可以浏览所有媒体查询，稍微调整填充/行高以获得对齐，但显然这并不能解决问题，只是创建了一个混乱的解决方案

如果我删除小文本行上的字体大小，它们将正确对齐。有人能帮助我理解为什么使用不同的字体大小会导致按钮和div中的文本对齐方式发生不同的变化，并提出解决方案，以便在我调整其他属性（如两者的高度）时，它们可以轻松一致地对齐。谢谢

。主菜单按钮{
框大小：边框框；
字体系列：Arial、Helvetica、无衬线字体；
浮动：左；
位置：相对位置；
字号：600；
字号：16pt；
高度：50px；
顶部：25px；
线高：3pt；
z指数：10；
背景色：白色；
边框：1px纯绿色；
}
.主菜单链接{
框大小：边框框；
字体系列：Arial、Helvetica、无衬线字体；
浮动：左；
位置：相对位置；
字号：600；
字号：16pt；
高度：50px；
宽度：120px；
顶部：25px；
线高：3pt；
z指数：10；
文本对齐：居中；
边框：实心1px黑色；
}
/*如果删除p标记中的字体大小，文本将对齐，但我希望在下面显示*/
p{
字号：8pt；
}

我的按钮文本位

我的链接一点文字

已从两个位置删除线宽

从p中删除边距

为按钮的div添加了边距*

如果只使用div或按钮，第3步会更好

。主菜单按钮{
框大小：边框框；
字体系列：Arial、Helvetica、无衬线字体；
浮动：左；
位置：相对位置；
字号：600；
字号：16pt；
高度：50px；
顶部：25px；
z指数：10；
背景色：白色；
边框：1px纯绿色；
}
.主菜单链接{
框大小：边框框；
字体系列：Arial、Helvetica、无衬线字体；
浮动：左；
位置：相对位置；
字号：600；
字号：16pt；
垫面：5px；
高度：50px；
宽度：120px；
顶部：25px；
z指数：10；
文本对齐：居中；
边框：实心1px黑色；
}
/*如果删除p标记中的字体大小，文本将对齐，但我希望在下面显示*/
p{
字号：8pt；
保证金：0；
}

我的按钮文本位

我的链接一点文字

按钮有点特殊，并且应用了默认的中心对齐方式。您需要对div执行同样的操作

。主菜单按钮，
.主菜单链接{
框大小：边框框；
显示：内联flex；
弯曲方向：立柱；
垂直对齐：顶部；
字体系列：Arial、Helvetica、无衬线字体；
字号：600；
字号：16pt；
高度：50px；
线高：3pt；
宽度：120px；
背景色：白色；
边框：1px纯绿色；
证明内容：中心；
对齐项目：居中；
}
p{
字号：8pt；
页边距底部：0；
}

My按钮文本位

我的链接
一段文字

.wrapper{
显示器：flex；
}
.wrapper>*{
右边距：5px；
填充物：5px10px；
}
.主菜单按钮{
框大小：边框框；
字体系列：Arial、Helvetica、无衬线字体；
字号：600；
字号：16pt；
背景色：白色；
边框：1px纯绿色；
}
.主菜单链接{
框大小：边框框；
字体系列：Arial、Helvetica、无衬线字体；
字号：600；
字号：16pt；
宽度：120px；
文本对齐：居中；
边框：实心1px黑色；
}
/*如果删除p标记中的字体大小，文本将对齐，但我希望在下面显示*/
p{
字号：8pt；
保证金：0；
}

我的按钮文本位

我的链接一点文字

尝试从

中删除行高。主菜单链接

，然后删除该特定块中p的边距。它将解决这个问题，我相信这仍然需要调整链接周围div的填充，当我在较小屏幕的媒体查询中缩小div的高度时