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>元素应该在预期 flow contents 的地方使用。这意味着它们 NOT 允许放在<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也会显示文本input s vertically at the middle的值，而IE8则不会显示。}

Answer 2

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

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

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

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

2 个答案:

背景

解决方案