html - 垂直对齐中心以外的按钮的内容

Question

通常人们想弄清楚如何使内容垂直居中，我想删除一个居中内容的实例并对齐，但我被卡住了。

按钮的内容(放置在表格单元格的列表中)默认垂直居中。我怎样才能删除它？如何对齐 <button> 的内容垂直到顶部？

<table>
 <tbody>
 <td>
  <ul>
  <li>
   <button>
    <div>Content</div>

我在 jsFiddle 上有一个例子.

button {
  display: block;
  position: relative;
  background-color: pink;
  width: 100%;
  min-height: 200px;
}

<button>
  <div>why?</div>
  <div>are these centered vertically?</div>
  <div>And how to remove it?</div>
</button>

Answer 1

Why the contents are vertically centered?

没有具体原因。这是 UA 处理按钮值/内容位置的方式(包括 <button> 、 <input type="button"> )¹。

How to remove vertical centering?

好吧，有一种方法可以实现这一目标。首先，需要一些背景知识。

但在此之前，您应该注意 <div>元素应该用在 flow contents 的地方 是预期的。这意味着它们不允许被放置在 <button> 中。元素。

根据 HTML5 spec (目前处于 PR 状态):

Content model for element button:
Phrasing content, but there must be no interactive content descendant.

因此，一个有效的 HTML 可能是这样的:

<button>
    why? <br>
    are these centered vertically? <br>
    And how to remove it?
</button>

背景

在内联流中，内联级元素( inline , inline-block )可以在父级内部通过 vertical-align 垂直对齐属性(property)。将其与 baseline 以外的值一起使用使内联级元素位于 baseline 以外的位置父级(这是默认位置)。

关键是taller elements would affect the line box / baseline .

解决方案

首先，为了处理线条的位置，我们需要用包装元素将它们包装起来，如 <span>如下:

<button>
    <span> <!-- Added wrapper -->
        why? <br>
        are these centered vertically? <br>
        And how to remove it?
    </span>
</button>

如果父级 - <button>在这种情况下 - 有一个明确的 height ，如果我们可以有一个子元素具有与父元素完全相同的高度，我们将能够扩展行框的高度并令人惊讶地使我们想要的流入子元素 -嵌套 <span>在这种情况下 - 通过 vertical-align: top; 垂直对齐到顶部声明。

10.8 Line height calculations: 'vertical-align' property

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

top
Align the top of the aligned subtree with the top of the line box.

EXAMPLE HERE

button { width: 100%; height: 200px; }

button > span {
    display: inline-block;
    vertical-align: top;
}

button:after {
    content: "";
    display: inline-block;
    vertical-align: top;
    height: 100%;
}

尤其是最后一个机器人，如果您想使用 min-height而不是 height对于 button , 你应该使用 min-height: inherit;对于伪元素也是如此。

EXAMPLE HERE .

---

¹ _{Chrome 和 Firefox 也显示文本的值 input s vertically at the middle而 IE8 则没有。}