是什么让<button>元素上的文本垂直居中？

Question

<button>我觉得这个元素周围有一些神奇的东西.

考虑这个标记:

<button class="button">Some Text</button>
<div class="button">Some Text</div>

这个CSS:

.button{
    background: darkgrey;
    height: 40px;
    border: 2px solid grey;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    font-family: helvetica;
    text-align: center;
    margin-bottom: 20px;

    /*I'm aware I could use this to center it*/
    /*line-height: 40px;*/
}

是什么让按钮元素中的文本垂直居中？WebKit的似乎是预先定义-webkit-box-align与值center的<button>元素.如果我将其设置为initial文本不再与中心对齐.但这似乎并不是完全的魔力,因为另一方面,我没有运气使用-webkit-box-align属性将文本集中在div上.

这是一个小提琴:http://jsfiddle.net/cburgdorf/G5Dgz/

Answer 1

我知道这已经有几年了,但是在为项目编写重置样式表时,我会在调查之后添加我的想法.

注意**这是基于浏览Firefox源码,因为它是最容易获取和阅读的.但是,基于其他浏览器中的类似行为,实现可能类似.

首先,这里的主要问题是<button>元素 - 至少在Firefox中 - 是使用<button>标记和它的子元素之间的内部元素构建的.在Firefox中,它被称为moz-button-content并且不是可以通过CSS访问并且已设置为显示块而不继承按钮的高度,您可以在useragent样式表中看到此样式声明

因为您不能影响此元素上的任何样式,所以您必须在<button>标记上添加样式.这导致了第二个问题 - 浏览器被硬编码为垂直定位按钮的内容.

鉴于这两个问题,您可以开始查看按钮如何强制内容居中,请考虑:

*|*::-moz-button-content {
    display: block;
    /* Please keep the Multicol/Flex/Grid/Align sections below in sync with
       ::-moz-scrolled-content in ua.css and ::-moz-fieldset-content above. */
    /* Multicol container */
    -moz-column-count: inherit;
    -moz-column-width: inherit;
    -moz-column-gap: inherit;
    -moz-column-rule: inherit;
    -moz-column-fill: inherit;
    /* Flex container */
    flex-direction: inherit;
    flex-wrap: inherit;
    /* -webkit-box container (aliased from -webkit versions to -moz versions) */
    -moz-box-orient: inherit;
    -moz-box-direction: inherit;
    -moz-box-pack: inherit;
    -moz-box-align: inherit;
    /* Grid container */
    grid-auto-columns: inherit;
    grid-auto-rows: inherit;
    grid-auto-flow: inherit;
    grid-column-gap: inherit;
    grid-row-gap: inherit;
    grid-template-areas: inherit;
    grid-template-columns: inherit;
    grid-template-rows: inherit;
    /* CSS Align */
    align-content: inherit;
    align-items: inherit;
    justify-content: inherit;
    justify-items: inherit;
}

如果给出button一个高度 - 就像48px你的小提琴一样,文本将居中,因为moz-button-content元素是显示块,并且只有内容的高度(默认情况下很可能是内容的行高),下次放下到另一个元素你得到这种行为:

// Center child in the block-direction in the button
// (technically, inside of the button's focus-padding area)
nscoord extraSpace =
    buttonContentBox.BSize(wm) - contentsDesiredSize.BSize(wm);

childPos.B(wm) = std::max(0, extraSpace / 2);

// Adjust childPos.B() to be in terms of the button's frame-rect:
childPos.B(wm) += clbp.BStart(wm);

nsSize containerSize = (buttonContentBox + clbp.Size(wm)).GetPhysicalSize(wm);

// Place the child
FinishReflowChild(aFirstKid, aPresContext, contentsDesiredSize,
                  &contentsReflowInput, wm, childPos, containerSize,
                  ReflowChildFlags::Default);

   <button> tag

+------------------------+ ^
| button extra space     | |
|                        | |
+------------------------+ |
|| ::moz-button-content || | button height
||   display: block;    || |
+------------------------+ |
|                        | |
| button extra space     | |
+------------------------+ v

这个错误和Firefox问题跟踪器中的这个错误很接近,因为我可以找到任何实际记录的错误.但线程给人的印象是,尽管没有出现在任何实际规范中,浏览器只是以这种方式实现它"因为其他浏览器正在这样做"

如果您确实想要更改默认行为,则可以解决此问题,但根据您的实现,它并不能完全解决问题和YMMV.

如果插入的包装<span>与display: block作为按钮的独子,把里面所有的内容,你可以用它来跳过moz-button-content元素.

您将需要使这个<span>元素height: inherit正确填充按钮的高度,然后将正常的按钮样式添加到相应的<span>,您将获得您想要的基本行为.

* {
  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 0;
  font-family: san-serif;
  background: none;
  font-size: 1em;
  line-height:1;
  vertical-align: baseline;
 }

button, a {
  height: 3em;
}

button {
  background: red;
}

a {
  display:inline-block;
  background: green;
 }

<button>Button content</button>
<a>Link Content</a>

还值得一提的是外观 CSS4规则(尚未提供):

虽然这不是一个可行的选择(截至1月5日).有人建议重新定义appearanceCSS4草案中的规则,该规则实际上可以做正确的事情,删除浏览器做出的所有假设.我只提到它的完整性,因为它可能在将来变得有用.

更新 - 2016年8月30日 您应该使用a <span>而不是a <div>,因为元素div不是有效的子<button>元素.我已经更新了答案以反映这一点.