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

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

可能仍然不理想 - 感觉像是一个涂满灰泥的 hack 解决方案。