Question

这可能是基础知识，但我读过一本书，将某些内容放在div内部，您应该：

  margin-left: auto;
  margin-right: auto;
  width:70%;

因此您给它一个width并设置auto margin。对于button，它将不起作用，我还需要添加它以使其起作用：

  display: block;

为什么在这种情况下我们需要阻止它？

Answer 1

inline / inline-block元素不能具有auto的{{1}}值。

如果您想使按钮居中而不将其设为margin，则可以在其父项上使用block。

此外，如果按钮以text-align: center / flex父项为中心，则不必一定是块。

我在下面添加了一些示例。

grid

.wrapper-center {
  padding: 20px;
  border: 1px solid blue;
  text-align: center;
}

/* ----- */

.wrapper {
  padding: 20px; 
  margin-top: 20px;
  border: 1px solid red;
}

.centered-button {
  display: block;
  margin: 0 auto;
}

/* ----- */

.flex-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 20px; 
  border: 1px solid green;
}

Answer 2

Display: block

这使部分或div本身占据了整个页面的一部分，从本质上是新行开始并占据了页面的宽度。因此，margin和width语句仅影响它。内联或不具有此属性要求，原因是它们的属性相对于同一行中的其他元素而变得如此

为什么我们需要显示块来使按钮居中

2 个答案: