通常人们想弄清楚如何使内容垂直居中,我想删除一个居中内容的实例并对齐,但我被卡住了。
按钮的内容(放置在表格单元格的列表中)默认垂直居中。我怎样才能删除它?如何对齐 <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?
没有具体原因。这是 UA 处理按钮值/内容位置的方式(包括 <button>
、 <input type="button">
)1。
How to remove vertical centering?
好吧,有一种方法可以实现这一目标。首先,需要一些背景知识。
但在此之前,您应该注意 <div>
元素应该用在 flow contents 的地方 是预期的。这意味着它们不允许被放置在 <button>
中。元素。
根据 HTML5 spec (目前处于 PR 状态):
Content model for element button:
Phrasing content, but there must be no interactive content descendant.
因此,一个有效的 HTML 可能是这样的:
<button>
why? <br>
are these centered vertically? <br>
And how to remove it?
</button>
背景
在内联流中,内联级元素( inline
, inline-block
)可以在父级内部通过 vertical-align
垂直对齐属性(property)。将其与 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
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
而不是 height
对于 button
, 你应该使用 min-height: inherit;
对于伪元素也是如此。
1 Chrome 和 Firefox 也显示文本的值 input
s vertically at the middle而 IE8 则没有。
关于html - 垂直对齐中心以外的按钮的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26160270/