是什么使文字在元素垂直居中？

是什么使文字在 元素垂直居中？

我知道这已经有两年的历史了，但是我会在编写项目的重置样式表时进行一些调查后发表自己的看法。

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

首先，这里的主要问题是，

<button>

至少在Firefox中的元素是使用

<button>

标记及其子元素之间的内部元素构建的。在Firefox中，它被称为

moz-button-content

并且不是CSS所能达到的，并且已设置为不继承按钮高度而显示为块，您可以在useragent样式表中看到此样式声明：

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

*|*::-moz-button-content {    display: block;            -moz-column-count: inherit;    -moz-column-width: inherit;    -moz-column-gap: inherit;    -moz-column-rule: inherit;    -moz-column-fill: inherit;        flex-direction: inherit;    flex-wrap: inherit;        -moz-box-orient: inherit;    -moz-box-direction: inherit;    -moz-box-pack: inherit;    -moz-box-align: inherit;        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;        align-content: inherit;    align-items: inherit;    justify-content: inherit;    justify-items: inherit;}

由于您不能影响此元素上的任何样式，因此您不得不在

<button>

标签上添加样式。这导致了第二个问题- 浏览器被
硬编码为垂直
放置
按钮的内容 。

来自“源/布局/表单/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 childFinishReflowChild(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

小提琴中的，则文本将居中，因为

moz-button-content

元素是显示块，并且仅具有内容的高度（默认情况下，内容的行高）以及下一个放置的高度到另一个元素，您会得到以下行为：

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

此bug和这个bug在Firefox的问题跟踪是关于一个接近我能找到任何实际记录的缺陷。但是线程给人的印象是，尽管这在任何实际规范中都没有出现，但是浏览器只是以这种方式实现了“因为其他浏览器都以这种方式”

---

如果您确实要更改默认行为，则有一个解决方法，但是它不能完全解决问题，具体取决于您的实现。

如果插入的包装

<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 ><span>Button content</span></button>    <a ><span>link Content<span></a>

还值得一提的是CSS4 外观规则（尚不可用 ）：

尽管这不是一个可行的选择（截至1月5日）。有人提议重新定义

appearance

CSS4草案中的规则，该规则实际上可能会做正确的事情，从而消除浏览器所做的所有假设。我之所以仅提及完整性，是因为它将来可能会变得有用。

更新-30/08/2016 您实际上应该使用a

<span>

而不是a

<div>

，因为

div

s不是

<button>

元素的有效子代。我已经更新了答案以反映这一点。