Html 无法垂直对齐标签和按钮

如果这个问题听起来很傻，请原谅，希望它能对其他人有所帮助

我试图让我的按钮与给定的标签对齐。不幸的是，我并不是很成功，因为尽管有相同的高度和填充值，但不同的元素并没有像我希望的那样在垂直平面上对齐

我基本上是复制标签

.resizedTextbox

中的CSS位，然后将它们粘贴到我的按钮

按钮中

有没有人有同样的问题，或者我在这里遗漏了什么


.resizedTextbox{
宽度：40px；
高度：20px；
填充物：5px 5px 5px；
边框颜色：#3e12cc；
文本阴影：0px 1px 1px#154682；
背景色：#f5effb；
垂直对齐：文本顶部；
文本对齐：居中；
字号：18px；
}
.按钮{
边界半径：3px；
背景颜色：蓝色；
边界：无；
颜色：白色；
填充物：5px 5px 5px；
文本对齐：居中；
文字装饰：无；
光标：指针；
宽度：80px；
高度：20px；
字母间距：2px；
字号：18px；
}

尝试对齐按钮和标签

关
30%
50%
80%
在…上
尝试使用Flexbox

也无需编写
padding:5px 5px 5px
…如果顶部、右侧、底部和左侧的值相同，只需使用
padding:5px

并从代码中删除
。此处不需要


#家庭自动化选项卡{
显示器：flex；
}
.resizedTextbox{
宽度：40px；
填充物：5px；
边框颜色：#3e12cc；
文本阴影：0px 1px 1px#154682；
背景色：#f5effb；
文本对齐：居中；
字号：18px；
}
.按钮{
边界半径：3px；
背景颜色：蓝色；
边界：无；
颜色：白色；
填充物：5px；
文本对齐：居中；
光标：指针；
宽度：80px；
字母间距：2px；
字号：18px；
左边距：5px；
}

尝试对齐按钮和标签

关
30%
50%
80%
在…上
尝试使用Flexbox

也无需编写
padding:5px 5px 5px
…如果顶部、右侧、底部和左侧的值相同，只需使用
padding:5px

并从代码中删除
。此处不需要


#家庭自动化选项卡{
显示器：flex；
}
.resizedTextbox{
宽度：40px；
填充物：5px；
边框颜色：#3e12cc；
文本阴影：0px 1px 1px#154682；
背景色：#f5effb；
文本对齐：居中；
字号：18px；
}
.按钮{
边界半径：3px；
背景颜色：蓝色；
边界：无；
颜色：白色；
填充物：5px；
文本对齐：居中；
光标：指针；
宽度：80px；
字母间距：2px；
字号：18px；
左边距：5px；
}

尝试对齐按钮和标签

关
30%
50%
80%
在…上
解决这个问题有多种方法Bhuwan提供的上述flexbox答案可能是最好的选择。

如果您坚持使用HTML结构，只需要css解决方案，请执行以下操作：


确保将
垂直对齐：text top
复制到两个css类中
向每个框添加
框大小：边框框
（我使用了下面的通配符选择器，
但您可以将其添加到每个）
并精确设置高度。以前，您依赖边框、加上填充、加上字体大小等来设置每个元素的高度
此时，您可能还需要重新查看标签的宽度，但在这里，您可以完全控制每个元素的高度和宽度


*{
框大小：边框框；
}
.resizedTextbox{
宽度：40px；
高度：40px；
填充物：5px；
边框颜色：#3e12cc；
文本阴影：0px 1px 1px#154682；
背景色：#f5effb；
垂直对齐：文本顶部；
文本对齐：居中；
字号：18px；
}
.按钮{
边界半径：3px；
背景颜色：蓝色；
边界：无；
颜色：白色；
填充物：5px；
文本对齐：居中；
文字装饰：无；
光标：指针；
宽度：80px；
高度：40px；
字母间距：2px；
字号：18px；
垂直对齐：文本顶部；
}

尝试对齐按钮和标签

关
30%
50%
80%
在…上
解决这个问题有多种方法Bhuwan提供的上述flexbox答案可能是最好的选择。

如果您坚持使用HTML结构，只需要css解决方案，请执行以下操作：


确保将
垂直对齐：text top
复制到两个css类中
向每个框添加
框大小：边框框
（我使用了下面的通配符选择器，
但您可以将其添加到每个）
并精确设置高度。以前，您依赖边框、加上填充、加上字体大小等来设置每个元素的高度
此时，您可能还需要重新查看标签的宽度，但在这里，您可以完全控制每个元素的高度和宽度


*{
框大小：边框框；
}
.resizedTextbox{
宽度：40px；
高度：40px；
填充物：5px；
边框颜色：#3e12cc；
文本阴影：0px 1px 1px#154682；
背景色：#f5effb；
垂直对齐：文本顶部；
文本对齐：居中；
字号：18px；
}
.按钮{
边界半径：3px；
背景颜色：蓝色；
边界：无；
颜色：白色；
填充物：5px；
文本对齐：居中；
文字装饰：无；
光标：指针；
宽度：80px；
高度：40px；
字母间距：2px；
字号：18px；
垂直对齐：文本顶部；
}

尝试对齐按钮和标签

关
30%
50%
80%
在…上
非常感谢布万。非常感谢你的迅速帮助。祝你周末愉快。亲切问候,，Laurent@Laurent很高兴有帮助