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

【问题标题】：Vertically align contents of a button other than center垂直对齐除中心以外的按钮的内容
【发布时间】：2014-11-27 09:49:45
【问题描述】：

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

默认情况下，按钮的内容（放置在表格单元格的列表中）垂直居中。我怎样才能删除这个？如何将<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>

【问题讨论】：

Top-align text within button element?的可能重复
jsfiddle 试试这个 JS Fiddle
对不起@jrenk，我不能使用位置：绝对，我真的想使用位置：静态
@primavera133 我不知道为什么，但即使您不使用引导程序和表格，按钮内的内容默认是垂直居中的，例如 - jsfiddle.net/44pz6f74 并解决您的问题可以将min-height: 200px; 应用于您的li 而不是button 就像这个演示一样 - jsfiddle.net/9wwm7hp2

标签： html css twitter-bootstrap-3 vertical-alignment

【解决方案1】：

为什么内容是垂直居中的？

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

如何去除垂直居中？

嗯，有办法做到这一点。首先，需要一点背景知识。

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

根据HTML5 spec（目前处于 PR 状态）：

元素button的
内容模型：
Phrasing content，但不能有interactive content的后代。

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

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

背景

在内联流中，内联级元素（inline、inline-block）可以通过vertical-align 属性在父级内部垂直对齐。将其与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

这个属性会影响一个线框内的垂直定位由内联元素生成的框。

顶部
将对齐的子树的顶部与行框的顶部对齐。

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 也会显示文本 inputs vertically at the middle 的值，而 IE8 则不会。}

【讨论】：

+0001) 按钮元素不是用于单行文本吗，无论您应用什么高度，文本都将始终在中间垂直对齐，并且不允许 div 作为子元素按钮元素，对吧？
@MaryMelody <button> 旨在使按钮能够具有诸如图像、粗体/斜体/等文本等内容，但不一定是 a single line 文本。但是，关于允许的内容，您是对的。感谢您向我指出这一点。在撰写本文时，我并不关心这一点。我会更新答案。

【解决方案2】：

Bootstrap 在按钮内容的上方和下方添加填充（6 像素）。您可以更改填充量：button{padding:0px;} 或 button{padding-top:x; padding-bottom:y;} 其中 x 和 y 是您选择的任何值。

如果您想更改该按钮，只需给按钮 id="table" 或类似的东西，然后执行：button#table{padding:0px;}

如果您可以避免使用垂直对齐，则并非所有浏览器都支持它。

【讨论】：