Html 是什么使a<；上的文本；按钮>；元素垂直居中？

似乎

元素周围有一些我不理解的魔力

考虑以下标记：

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

是什么使button元素中的文本垂直居中？Webkit似乎为

元素预定义了一个

-Webkit框align

与

中心的值。如果我将其设置为
initial
，文本将不再与中心对齐。但这似乎不是全部的魔法，因为另一方面，我没有运气使用
-webkit-box-align
属性将文本集中在div上

这是一把小提琴：
你可以用填充物

比如说

padding: 20px 10px;

可以使用
显示：表格单元格；
垂直对齐：中间对齐作为替代方法
 在Mozilla Firefox上，我获得了以下属性：

-moz-appareance: button;

在HTML5草案中，有一个，但没有详细说明位置：S
我认为这种行为的唯一原因是Google Chrome或浏览器通常会从您的操作系统中采用默认样式

例如，如果比较在windows 7和windows 8中运行的Google Chrome上的按钮或滚动条：


在Windows7中，按钮的中心将有一条水平渐变线

在Windows8中，滚动条可以在单击时淡入淡出


这只是我的观点，但希望它能给你一些想法：）
我知道这已经有好几年了，但我会在为一个项目编写重置样式表时，在问题中添加一些调查后的想法

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

首先，这里的主要问题是
元素（至少在Firefox中）是在
标记与其子元素之间构建的内部元素。在Firefox中，它被称为
moz button content
，并且不是CSS可以达到的，它被设置为显示块而不继承按钮的高度，您可以在以下页面中看到此样式声明：

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

由于您不能影响此元素上的任何样式，因此必须在
标记上添加样式。这引出了第二个问题-浏览器是按钮的内容

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

考虑到这两个问题，您可以开始了解按钮如何强制内容居中，请考虑：

   <button> tag

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

按钮内容
链接内容
如果您需要摆脱这种行为，您可以将
span
添加为
按钮
的子项。比试图欺骗所有浏览器效果更好。
默认情况下，按钮元素将子元素垂直居中。它不是以传统的CSS方式完成的，因此覆盖也不是一件小事

我找到的最佳解决方案是将按钮设置为flex列


按钮{
高度：100px；
显示器：flex；
弯曲方向：立柱；
}
跨度{
高度：20px；
宽度：100px；
背景颜色：蓝色；
显示：块；
}

您是否在多个浏览器上尝试过此功能？我不确定，但这可能是一个必须重置浏览器样式的问题。此外，也许这会让你玩按钮更容易找到解决方案。它并不完美，但只要我想找到新的按钮样式，它就很好用。下面是添加到
div
的
按钮的默认webkit css，但这不会给你（我们）一个问题的答案HTML表单元素至少部分由本机操作系统呈现，这就是为什么它们在历史上很难风格化。确切的样式并不总是可以用CSS样式来解释。@Johan，但即使将所有webkit默认样式应用于div，文本仍然不居中。@MattCoughlin是的，我想知道这是否也会影响这种情况。另一方面，按钮似乎对
-webkit-box-align
有反应，但我不明白为什么div没有对此作出反应……是的，这是另一种将文本居中的解决方案。然而，在理解webkit如何将文本居中之后，我更感兴趣。因为它似乎与
-webkit-box-align
有关，这正是按钮类型元素的样式，以获得垂直居中的效果。是的，确实如此。这不是问题：）谢谢。我也知道这个技巧。我更多的是在弄清楚浏览器如何使其居中之后-webkit框对齐：居中div的呈现方式与按钮不同。我知道有一些UI元素是内部样式的，比如微调器按钮之类的东西。我认为向用户开放样式是一项正在进行的工作。也许你描述的行为属于这一类。我生活在一个错误的假设下，2013年所有元素的样式都是完全使用预定义的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;
}

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