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

Question

我正在开发一个项目，其中有一行控件，每个控件都是一个按钮元素。按钮内部有内容，它们与flexbox排成一行。按钮元素将其内容垂直居中，我无法弄清楚如何覆盖它以在按钮顶部垂直对齐它。控件都必须具有相同的高度和相同的宽度，并且单击边框中的任何位置都必须计为单击按钮。

此Codepen清楚地显示了问题：http://codepen.io/anon/pen/RPpqdz

.wrapper {
  display: flex;
  flex-direction: row;
  width: 80%;
}

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

<h1>What it looks like</h1>
<div class="wrapper">
  <button>I am Content</button>
  <button>I am Much Longer Content That Goes Here and Here</button>
  <button>I am Content</button>
</div>

<h1>What I want it to look like</h1>
<div class="wrapper">
  <div class="object">I am Content</div>
  <div class="object">I am Much Longer Content That Goes Here and Here</div>
  <div class="object">I am Content</div>
</div>

我意识到这个问题可以通过不使用按钮元素来解决，但我也觉得我应该能够覆盖按钮元素的这种行为。我想为自己的理智做好准备！

Answer 1

首先，h2内的p和button无效HTML。

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

但是如果你真的必须使用这个 BROKEN HTML，并且只有顶部对齐很重要，你可以强制元素占据固定的高度，以便按钮将它们对齐在顶部，像这样：

button > h2 {
    height: 48px;
}

button > p {
    height: 16px;
}

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

在任何情况下，都要认真地试图说服那些负责该项目的更大背景的人。使用适当的有效HTML。

修改

如果按钮内仅使用内联元素，则问题变得更易于管理。唯一需要注意的是：您需要事先知道按钮的高度。然后，您可以使用填充来模拟上下流。

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

仍然可能不理想 - 感觉就像一个厚重的黑客解决方案。

Answer 2

*我不确定你想要什么，你是什么意思“如何覆盖它以垂直对齐按钮的顶部？”？但我希望这段代码是你想要的。（相同的高度，宽度，甚至空格也是与div匹配的按钮（.objects）。

.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;
}