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

通常人们试图找出如何垂直居中的东西,我想删除居中内容的实例并对齐,我被卡住了.

默认情况下,按钮的内容(放置在表格单元格中的列表中)垂直居中.我该如何删除？如何对齐< 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>

解决方法

Why the contents are vertically centered?

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

How to remove vertical centering?

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

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

根据HTML5 spec(现在处于PR状态)：

Content model for element 07002:
07003,but there must be no 07004 descendant.

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

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

背景

在内联流中,内联级元素(内联,内联块)可以通过vertical-align属性在父级内垂直对齐.使用除基线以外的值使得内联级元素位于父级的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>在这种情况下 – 有一个明确的高度,如果我们可以有一个子元素具有完全相同的父级高度,我们将能够扩展线框的高度,并令人惊讶地使我们想要的流入的孩子 – 嵌套的< span>在这种情况下 – 通过垂直对齐垂直对齐顶部：顶部;宣言.

07008

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：inherit;对于伪元素也是如此.

EXAMPLE HERE.

1 Chrome和Firefox也会显示文本输入vertically at the middle的值,而IE8则不显示.