41

似乎<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-aligna 的值。如果我将其设置为文本不再与中心对齐。但这似乎并不是全部的魔力，因为另一方面，我没有运气使用该属性将文本集中在 div 上。center<button>initial-webkit-box-align

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

4

7 回答 7

27

我知道这已经有几年的历史了，但是在为项目编写重置样式表时，我会在对问题进行一些调查后添加我的想法。

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

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

来自“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>标签上添加你的样式。这导致了第二个问题 -浏览器被硬编码以垂直定位按钮的内容。

从“源/布局/表单/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你的小提琴一样，文本将居中，因为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和Firefox 问题跟踪器中的这个 bug 与我发现的任何实际记录的 bug 差不多。但是线程给人的印象是，尽管这没有出现在任何实际规范中，但浏览器只是以这种方式实现了它“因为其他浏览器正在这样做”

如果您确实想更改默认行为，则可以解决此问题，但它并不能完全解决问题和 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>

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

虽然这不是一个可行的选择（截至 1 月 5 日）。有一项提议重新定义appearanceCSS4 草案中的规则，这实际上可能会做正确的事情，即删除浏览器所做的所有假设。我只是为了完整性而提到它，因为它将来可能会变得有用。

更新 - 30/08/2016 您实际上应该使用 a<span>而不是 a <div>，因为div's 不是<button>元素的有效子级。我已经更新了答案以反映这一点。

于 2016-01-05T13:08:09.930 回答
4

你可以使用填充。

例如

padding: 20px 10px;
于 2013-04-02T13:04:11.000 回答
2

我认为这种行为的唯一原因是 Google Chrome 或一般浏览器会从您的操作系统中获取默认样式。

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

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

  • 在 Windows 8 中，滚动条能够在单击时淡入和淡出

这只是我的看法，但希望它能给你一些想法:)

于 2013-04-03T06:54:04.213 回答
1

您可以display:table-cell; vertical-align: middle;用作替代方法。

于 2013-04-02T13:12:16.953 回答
1

在 Mozilla Firefox 上，我得到了-moz-appearance属性：

-moz-appareance: button;

在 HTML5 草案中，有一个渲染部分，但没有详细说明放置：S

于 2013-04-02T13:34:14.307 回答
0

默认情况下，按钮元素垂直居中子元素。它不是以传统的 CSS 方式完成的，因此重写并非易事。

我发现的最佳解决方案是将按钮设置为 flex 列。

button {
  height: 100px; 
  display: flex; 
  flex-direction: column; 
}

span {
  height: 20px; 
  width: 100px; 
  background-color: blue; 
  display: block; 
}
<button>
  <span></span>
</button>

一些答案建议添加一个内部包装器，并将其高度设置为继承。这可能不适用于动态计算高度的元素。

于 2020-05-12T10:57:55.723 回答
-1

如果您需要摆脱这种行为，您可以添加span为button. 比试图欺骗所有浏览器更好。

于 2020-04-09T10:57:31.813 回答