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

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

为什么内容垂直居中？

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

如何删除垂直居中？

好吧,有办法实现这一目标.首先,需要一点背景知识.

但在此之前,您应该注意,<div>应该在需要流内容的地方使用元素.这意味着它们不允许被置于其内<button>的元件.

根据HTML5规范 (现在处于PR状态):

元素按钮的内容模型:
Phrasing内容,但必须没有交互式内容后代.

因此,有效的HTML可能是这样的:

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

背景

在内联流中,内联级元素(inline,inline-block)可以在父vertical-align属性内垂直对齐.使用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行高计算:'vertical-align'属性

此属性会影响由内联级元素生成的框的线框内的垂直位置.

顶部
将对齐子树的顶部与线框顶部对齐.

这里的例子

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;的伪元素为好.

这里的例子.

¹ _{Chrome和Firefox还显示文本的值input小号垂直于中间而IE8并不为实例.}