Html 如何独立于文本大小来阻止按钮大小？

所以我试着把我的纽扣做成这样。 我曾尝试为每个按钮组创建容器，并将它们的填充设置为50 px 60 px，但这不起作用，它们仍然会拉伸

我有这个：

代码如下：

.container5{
背景图片：url（“servicos.svg”）；
宽度：100vw；
高度：100vh；
背景尺寸：包含；
最大宽度：100%；
左：0；
}
.容器5.下划线{
填充顶部：20px；
垫底：10px；
文字装饰：无；
边框底部：5px实心rgb（220,52,52）；
}
.集装箱5 h1{
保证金：自动；
线高：30px；
垂直对齐：中间对齐；
左边距：10vh；
体重：950；
垫顶：10vh；
字体系列：“源Sans-Pro”，无衬线；
字体大小：50px；
颜色：#000；
}
.container5.btn组{
左：0；
左边距：5vw；
}
.container5.btn组按钮{
颜色：白色；
背景色：#05031b；
字体系列：Helvetica、Arial、无衬线字体；
字体大小：15px；
文字装饰：无；
位置：相对位置；
填充：40px 35px；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
裕度：0 10px 0 0；
}
.container5.btn组.btn组ls{
字体大小：10px；
}
.container5.btn-group2{
左：0；
边际上限：3vh；
填充：40px 30px；
}
.container5.btn-group2按钮{
颜色：白色；
背景色：#05031b；
字体系列：Helvetica、Arial、无衬线字体；
字体大小：15px；
文字装饰：无；
位置：相对位置；
裕度：0 10px 0 0；
左：0；
}
.container5.btn-group3{
边际上限：3vh；
}
.container5.btn-group3按钮{
颜色：白色；
背景色：#05031b；
字体系列：Helvetica、Arial、无衬线字体；
字体大小：15px；
文字装饰：无；
位置：相对位置；
填充：40px 30px；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
裕度：0 10px 0 0；
}

塞维索斯
视频奥拉斯
生活日记


（麦卡多分析）
西奈沙拉酒店
塞马奈斯的生活


（梅尔卡多酒店）
塞马奈斯的生活


（第二段）
双材料
费拉门塔斯辅助酒店
普雷米娅·乔波尔酒店


德森彭霍（孟萨尔）
塔兰托斯计划

您可以对其应用

宽度和高度设置。要使它们都具有相同的高度（不管其中的文本量有多大），还可以添加一个至少与最高按钮一样高的
min height
设置

要使文本正确居中对齐，可以使用
display:flex；证明内容：中心；对齐项目：居中宽度
和
高度
设置应用到按钮上。嗨，你的HTML代码有一些问题，你缺少一些结束标记。除此之外，在CSS网格或FlexBox中使用div可能会更好。由于您的按钮都没有ID，我认为您实际上不需要它们作为启动JS事件的真正按钮。好吧，您至少错过了7个结束标记。您可能应该首先编辑HTML代码，并修复代码，使其至少与openign和closing标记相匹配。@Johannes好的，可以了，猜猜如何调整按钮的级别吗？那些文本较多的人比其他人低几个像素。@tacoshy我已经解决了这个问题，谢谢伙计