垂直对齐按钮的内容而不是居中 [英] Vertically align contents of a button other than center
问题描述
通常人们试图弄清楚如何垂直居中内容，我想删除居中内容的实例并对齐，但我被卡住了.
按钮的内容(放置在表格单元格的列表中)默认垂直居中.我怎样才能删除它?如何将的内容垂直对齐到顶部?
<td><ul><li><按钮><div>内容</div>我有一个关于 jsFiddle 的例子.
button {显示:块；位置:相对；背景颜色:粉红色；宽度:100%；最小高度:200px；}
解决方案 为什么内容垂直居中?
没有具体的原因.这就是 UA 处理按钮的值/内容位置的方式(包括
<块引用>如何去除垂直居中?
嗯，有一种方法可以实现这一目标.首先，需要一点背景.
但在此之前，您应该注意
元素应该用于流内容 是预期的.这意味着它们不允许被放置在根据 HTML5 规范 (目前处于 PR 状态):
<块引用>因此，一个有效的 HTML 可能是这样的:
背景
在内联流中，内联级元素(inline、inline-block)可以通过 vertical-align 属性.将它与 baseline 以外的值一起使用会使内联级元素定位在 基线 父级(这是默认位置).
关键是 较高的元素会影响行框/基线.
解决方案
首先，为了处理行的位置，我们需要用一个像 <span> 这样的包装元素来包装它们，如下所示:
如果父元素 - 在本例中为 height，如果我们可以有一个具有 <强>与父级完全相同的高度，我们将能够扩展行框的高度并令人惊讶地使我们想要的流入子级 - 在此嵌套的 vertical-align: top; 声明垂直对齐到顶部.
<块引用>该属性影响行框内的垂直定位由内联级元素生成的框.
顶部
将对齐的子树的顶部与行框的顶部对齐.
button { width: 100%;高度:200px；}按钮 >跨度 {显示:内联块；垂直对齐:顶部；}按钮:{内容: "";显示:内联块；垂直对齐:顶部；高度:100%；}
最后一个机器人，如果你想对 button 使用 min-height 而不是 height，你应该使用 min-height:inherit; 也用于伪元素.
示例.
<小时>1 Chrome 和 Firefox 也显示文本值 inputs 垂直居中，而 IE8 则不然.
Usually people try to figure out how to vertically center stuff, I want to remove an instance of centered content and align and I'm stuck.
The content of the button (that is placed in a list in a table cell) is vertically centered by default. How can I remove this? How to align the contents of the <button> vertically to the top?
<table>
<tbody>
<td>
<ul>
<li>
<button>
<div>Content</div>
I have an example on 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?
There's no specific reason. This is the way UAs handle the position of value/content of buttons (including <button>, <input type="button">)1.
How to remove vertical centering?
Well, there's a way to achieve that. First, a little background is needed.
But before that, you should note that <div> elements are supposed to be used where flow contents are expected. This means that they are NOT allowed to be placed inside <button> elements.
As per HTML5 spec (Which is at PR state right now):
Content model for element button:
Phrasing content, but there must be no interactive content descendant.
Therefore, a valid HTML could be like this:
<button>
why? <br>
are these centered vertically? <br>
And how to remove it?
</button>
Background
In an inline flow, inline-level elements (inline, inline-block) can be aligned vertically inside the parent by vertical-align property. Using that with a value other than baseline makes inline-level elements position somewhere other than the baseline of the parent (which is the default place).
The key point is that taller elements would affect the line box / baseline.
The Solution
First, in order to handle the position of the lines, we need to wrap them by a wrapper element like <span> as follows:
<button>
<span> <!-- Added wrapper -->
why? <br>
are these centered vertically? <br>
And how to remove it?
</span>
</button>
In cases that the parent - the <button> in this case - has an explicit height, by any chance if we could have a child element having the exact same height of the parent, we would be able to expand the height of the line box and surprisingly make our desired in-flow child - the nested <span> in this case - be aligned to the top vertically by vertical-align: top; declaration.
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%;
}
Last bot not least, if you'd like to use min-height rather than height for the button, you should use min-height: inherit; for the pseudo-element as well.
1 Chrome and Firefox also display the value of text inputs vertically at the middle while IE8 doesn't for instance.
这篇关于垂直对齐按钮的内容而不是居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆