默认情况下,按钮的内容(放置在表格单元格中的列表中)垂直居中.我该如何删除？如何对齐< 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.
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;对于伪元素也是如此.
1 Chrome和Firefox也会显示文本输入vertically at the middle的值,而IE8则不显示.
