垂直对齐中心以外的按钮的内容 [英] Vertically align contents of a button other than center

问题描述

通常人们试图弄清楚如何垂直居中放置东西，我想移除一个居中内容的实例，然后对齐和卡住。

该按钮（放置在表格单元格中的列表中）默认为垂直居中。我该如何删除它？如何将<按钮> 的内容垂直对齐？

$ C><表>
< tbody>
< td>
< ul>
< li>
<按钮>
< div>内容< / div>

我在 jsFiddle 。

button {display：block;位置：相对; background-color：pink;宽度：100％; min-height：200px;}

< button> < DIV>？为何< / DIV> < div>这些是垂直居中吗？< / div> < div>如何删除它？< / div>< / button>

为什么内容是垂直居中的？

$ b $ b

没有具体原因。这是UA处理按钮的价值/内容的位置（包括<按钮> ，< input type =button> ） 1 。。 中心？

好的，有一种方法可以实现。首先，需要一点背景资料。

但在此之前，您应该注意< div> 元素是应该用于 流内容 是预期的。这意味着它们是 NOT 允许放置在< button> 元素中。

按照 HTML5规范 （现在处于PR状态）：

http://www.w3.org/TR/html5/forms.html#the-button-element =nofollow noreferrer>按钮：

短语内容 ，但一定不能互动内容后裔。

因此，一个有效的HTML可能是这样的：

 <按钮> 
为什么？ <峰; br> 
是这些垂直居中吗？ <峰; br> 
以及如何删除它？ 
< / button> 
  

背景

在内联流程中，内嵌级元素（ inline ， inline-block ）可以通过 vertical-align 属性。通过 baseline 以外的值使用它可以使内联级元素位于除

关键在于元素会影响线box / baseline 。

解决方案

首先，为了处理我们需要用一个包装元素（如< span> ）来包装它们，如下所示：

 <按钮> 
< span> <！ - 新增封套 - > 
为什么？ <峰; br> 
是这些垂直居中吗？ <峰; br> 
以及如何删除它？ 
< / span> 
< / button> 
  

如果父母 - <按钮> 在这种情况下 - 具有明确的高度，如果我们可以有一个具有完全相同高度的父元素，我们将能够扩展线框的高度，并令人惊讶地使我们期望的流入子节点 - 在这种情况下嵌套的< span> - 与垂直顶部 vertical-align：top; 声明

< 10.8线高计算：'vertical-align'属性

这个属性会影响
行框内的垂直定位，这是由行内元素生成的框。

top

将对齐子树的顶部与行框的顶部对齐。

示例

button {width：100％; height：200px; }

按钮> span {
display：inline-block;
vertical-align：top;
}

按钮：在{
content：;
display：inline-block;
vertical-align：top;
身高：100％;
}


最后一个僵尸程序并非最不重要，如果您想使用<$ c $对于按钮，您应该使用<$ c> min-height 而不是 height c $ c> min-height：inherit; 也是伪元素。
$ b 示例在这里 。

---

¹ _{Chrome和Firefox也会显示文本输入的值 s 垂直位于中间位置，而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">)¹.

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.

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%;
}

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.

EXAMPLE HERE.

---

¹ _{Chrome and Firefox also display the value of text inputs vertically at the middle while IE8 doesn't for instance.}

这篇关于垂直对齐中心以外的按钮的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！