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

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

为什么内容垂直居中？

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

如何删除垂直居中？

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

但在此之前，您应该注意到<div>元素应该用于期望流内容的地方。 这意味着它们不能被放置内部<button>元素。

根据HTML5规范 （现在处于PR状态） ：

元素按钮的 内容模型 ：
短语内容 ，但必须没有互动内容后代。

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

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

背景

在内联流中，内联级元素（ inline ， inline-block ）可以通过vertical-align属性在父级内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;对齐到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则不会。}

Answer 2

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

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

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