按钮不在块级容器中居中答案

【问题标题】：Button does not get centered in block-level container按钮不在块级容器中居中
【发布时间】：2016-08-27 15:22:43
【问题描述】：

为什么放在flex容器内的按钮使用margin : 0px auto;居中，而放在普通容器内的按钮却不是？

另外，我可以做些什么来使按钮在普通容器中居中（我无法更改我的 HTML，因此我们将不胜感激使用 CSS 解决方案。）

.flex-container {
  display: flex;
  background: yellow;
}
.normal-container {
  background: green;
}
button {
  margin: 0px auto;
}

<div class="flex-container">
  <button>Button in flex</button>
</div>
<div class="normal-container">
  <button>Button in normal</button>
</div>

jsFiddle 链接：https://jsfiddle.net/r8h3d9wy/1/

【问题讨论】：

标签： html css flexbox centering

【解决方案1】：

text-align:center 在父级上，因为输入/按钮是内联级元素。

margin:0 auto 在 flex-containers 中起作用，因为这是对齐在 flex-items 上起作用的方式。它有效地消除了内联级别的性质，并使其成为一个 flex-child。

.flex-container {
  display: flex;
  background: yellow;
  justify-content: center;
}
.normal-container {
  background: green;
  text-align: center;
}

<div class="flex-container">
  <button>Button in flex</button>
</div>
<div class="normal-container">
  <button>Button in normal</button>
</div>

【讨论】：

我可以改为display:inline-block或display:block吗？
当然，如果您愿意，但取决于您的结构，可能会产生其他影响。

【解决方案2】：

在普通容器中，margin: 0px auto 仅适用于块元素。试试这个：

button {
    display: block;
    margin: 0px auto;
}

通常，块元素的宽度默认为 100%。在这种情况下，这不是问题，因为您使用了一个按钮。否则，您必须将宽度设置为元素居中。

【讨论】：

【解决方案3】：

如果您检查 chrome 中的计算样式，您会注意到 flex 容器中的子元素将具有 display:block，而普通容器中的子元素将具有 display:inline-block。如果您将 display:block 添加到按钮的 CSS 中，它将在两个容器中居中。

【讨论】：

【解决方案4】：

使用内联元素，如 button、margin-left: auto 和 margin-right: auto 计算为 0。

10.3.1 Inline, non-replaced elements

width 属性不适用。 auto 的指定值用于 left、right、margin-left 或 margin-right 变为计算 0 的值。

您可以通过以下方式将button 元素居中：

将text-align: center 应用于父级 (demo)，或者
在按钮 (demo) 上切换到 display: block。

在 flex 容器中，您在 flex formatting context 中工作，它阻止 flex 项并允许与 auto margins 对齐。

【讨论】：

【解决方案5】：

以下 CSS 代码可以解决问题。我已经使用 cmets 进行了解释。

.flex-container{
  display:flex;
  background:yellow;
}

.normal-container{
  background:green;
  text-align: center; /*aligns inline items to center.*/

button{
  margin : auto;
  display: inline; /* Not needed in this case as the button is an inline element naturally. However, if you have a block element, you would use this to make it an inline element. Explanation below. */
}

一个 display:block 元素占据了它在父容器中右边或左边的所有空间。因此，margin:auto 什么都不做，因为没有边距。使其成为内联元素会改变这一点并释放边距，从而允许 margin:auto 工作。

【讨论】：