Css 如何使用按钮元素更改内容的垂直对齐方式？

我正在处理一个项目，其中有一行控件，每个控件都是一个按钮元素。按钮内部有内容，它们与flexbox一起排成一行。button元素将其内容垂直居中，我不知道如何覆盖它，使其垂直对齐在按钮顶部。所有控件都必须具有相同的高度和宽度，单击边框中的任何位置都必须算作单击按钮

此代码笔清楚地显示了问题：

.wrapper{
显示器：flex；
弯曲方向：行；
宽度：80%；
}
按钮
.反对{
字体系列：无衬线；
字号：1em；
填充：1em；
背景：#fff；
弹性：1；
边框：1px纯红；
文本对齐：左对齐；
}

它看起来像什么
我很满意
我不再满足于这里和这里
我很满意
我希望它看起来像什么
我很满意
我不再满足于这里和这里
我很满意

首先，在

按钮中包含
h2
和
p
是无效的HTML

其次，没有简单的方法来控制按钮中元素的位置，尤其是垂直方向

但是，如果确实必须使用此断开的HTML，并且只有顶部对齐很重要，则可以强制元素占据固定高度，以便按钮将它们对齐在顶部，如下所示：

button > h2 {
    height: 48px;
}

button > p {
    height: 16px;
}

我必须说，这与使用
仍然不完全相同，所以我不知道这是否足够

在任何情况下，请认真尝试说服负责“项目更大范围”的人员使用正确有效的HTML

编辑：

如果按钮内部只使用内联元素，那么问题将变得更容易处理。唯一的警告是：你需要事先知道按钮的高度。然后，可以使用填充模拟上下流动

button {
    padding-top: 1em;
    padding-right: 1em;
    padding-bottom: 5em; /* make sure bottom + top padding == height */
    padding-left: 1em;
    height: 6em;
}

仍然可能不理想-感觉像是一个沉重的黑客解决方案。
*我不确定您想要什么，以及“如何覆盖它以垂直对齐按钮顶部”是什么意思？但我希望这段代码是您想要的（相同的高度、宽度，甚至带有空格，也有与div（.objects）匹配的按钮）。
不确定您想要什么，但这似乎是javascript的工作，这里有一些东西可以尝试（jQuery）
$（按钮）。单击（function（）{$（'el'）.css（{“new-style”：“value”}）
如果我在按钮内使用跨距或其他内联元素，则此问题完全相同，这是有效的。我已更新了代码笔，我也将更新问题。解决方案不能对按钮内的任何内容施加静态高度，这一点很重要。不幸，这不起作用。按钮都需要是sa我的宽度，即使他们没有，你也会注意到问题仍然存在于某些浏览器的宽度。你能解释一下你希望它是怎样的吗？因为我不知道我已经接近或完全不知道我离你想要什么很远。
.wrapper {
  display: inline-flex;
  display: -moz-inline-box;
  width: 90%;
}

button, .object {
  font-family: sans-serif;
  font-size: 1em;
  padding: 1em;
  background: #fff;
  border: 1px solid red;
  text-align: left;
  margin: 0em 0.3em 0em 0em;
}