Html 如何在一个div的中间对齐跨距元素，从上到下？

我想改变这个特定div的垂直位置中的所有元素，使它们在中、上、下对齐。 “垂直对齐：顶部”适用于我的按钮，但不适用于我的其他两个文本元素

“保证金：0px”似乎不起作用

.FirstRetailer{
明确：两者皆有；
背景色：#07213F；
填充：10px；
高度：62px；
线高：62px；
颜色：#FFFFFF；
垂直对齐：顶部；
}
.RetailerRight1{
浮动：对；
浮动：顶部；
高度：42px；
垂直对齐：文本底部；
}
.零售价格1{
填充：0px 10px；
高度：22px；
}
.btnGoToProduct{
背景色：#A60000；
边界：无；
颜色：白色；
填充：0px 10px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
高度：42px；
线高：42px；
垂直对齐：顶部；
}

产品名称
$100.00

您可以通过将布局转换为使用来实现这一点

我对html做了一些更改（例如删除RetailerRight1类），并删除了代码中的css浮动和垂直对齐规则

代码：

.FirstRetailer{
明确：两者皆有；
背景色：#07213F；
填充：10px；
高度：62px；
显示器：flex；
颜色：#FFFFFF；
调整内容：灵活启动；
对齐项目：居中；
}
.RetailerLeft1{
右边距：自动；
}
.零售价格1{
填充：0px 10px；
高度：22px；
}
.btnGoToProduct{
证明内容：柔性端；
背景色：#A60000；
边界：无；
颜色：白色；
填充：0px 10px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
高度：42px；
线高：42px；
垂直对齐：顶部；
}

产品名称
$100.00                                    
默认情况下，
垂直内联：基线
，用于保持divs内联。无需添加任何其他
垂直内联属性。虽然只需从类
btnGoToProduct
中删除
vertical align:top
即可解决此问题，但我建议您删除所有
vertical align
属性。
谢谢。这就是我需要的解决办法。我还删除了“.RetailerPrice1{height:22px；}”这一行，以便价格符合要求。再次感谢你