html - 是什么让 元素上的文本垂直居中？

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 的中心。属性(property)。

这是一个 fiddle :http://jsfiddle.net/cburgdorf/G5Dgz/

Answer 1

我知道这是几年前的事了，但我会在为元素编写重置样式表时对问题进行一些调查后添加我的想法。

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

首先，这里的主要问题是 <button>元素 - 至少在 Firefox 中 - 是用 <button> 之间的内部元素构建的标签和它的 child 。在 Firefox 中它被称为 moz-button-content并且不是 CSS 可以达到的东西，并且已设置为显示 block 而不继承按钮的高度，您可以在 useragent stylesheet 中看到此样式声明。 :

来自“source/layout/style/res/forms.css”

*|*::-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> 上添加样式。标签。这导致第二个问题 - 浏览器是 hard coded to vertically position按钮的内容。

来自“source/layout/forms/nsHTMLButtonControlFrame.cpp”

// 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

如果你给button一个高度 - 比如 48px从你的 fiddle 中，文本将居中，因为 moz-button-content元素是显示 block ，只有内容的高度(默认情况下很可能是内容的行高)，当放在另一个元素旁边时，你会得到这种行为:

* {
  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>

This bug和 this bug在 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;
    }
    button::-moz-focus-inner {
      border: 0;
      padding: 0;
      outline: 0;
    }

    button > span {
      display: block;
      height: inherit;
    }

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

    button.styled > span , a.styled{
      padding: 10px;
      background: yellow;
    }

    <button><span>Button content</span></button>
    <a><span>Link Content<span></a><br/>
    <button class="styled"><span>Button content</span></button>
    <a class="styled"><span>Link Content<span></a>

还值得一提的是 appearance CSS4 规则(尚不可用):

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

更新 - 2016 年 8 月 30 日你实际上应该使用 <span>而不是 <div> , 作为 div的不是 <button> 的有效 child 元素。我已经更新了答案以反射(reflect)这一点。