元素不居中答案

【问题标题】：Elements Not Centering元素不居中
【发布时间】：2022-01-04 17:05:43
【问题描述】：

我正在为我的客户制作网站，但我遇到了问题。我想要弹出 3 个带有文本的按钮，但它们不会居中。当我检查检查器时，我可以看到一个奇怪的边距，而我自己并没有这样做。

感谢您的所有回复，但遗憾的是没有一个有效。我认为这与我网站上的其他内容有关。

如果你想要特定部分的代码，就说吧，我不知道在代码方面什么不应该，这里放什么。

#Buttons
{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    min-height: 400px;
    margin: 0 auto !important;
    }
    
.Button
{
    margin-right: 50px;
    width: 200px;
    height: 200px;
    background-color: white;
 }
    


<div id="Buttons">
   <div class="Button"></div>
   <div class="Button"></div>
   <div class="Button"></div>
</div>

Photo of the problem.

Margin of the buttons.

【问题讨论】：

顺便说一句，如果您正在创建按钮，我建议使用 <button> 元素，因为这就是它的用途。您还可以使用它们自动访问！
.Button 的 css 的边距不是右侧部分吗？如果您将其更改为简单的边距，则应将其调整到中心。

标签： html css flexbox centering

【解决方案1】：

要使弹性项目居中，请将justify-content: center 应用于容器。

要将最后一个按钮的边距设置为 0，请添加以下规则：

.Button:last-child {
  margin-right: 0px;
}

编辑/注意：我为下面的 sn-p 缩小了按钮，以不扩展 sn-p 窗口的宽度。

#Buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 400px;
  margin: 0 auto !important;
  background: blue;
}

.Button {
  margin-right: 50px;
  width: 140px;
  height: 140px;
  background-color: white;
}

.Button:last-child {
  margin-right: 0px;
}

<div id="Buttons">
  <div class="Button"></div>
  <div class="Button"></div>
  <div class="Button"></div>
</div>

【讨论】：

这对我有用

【解决方案2】：

将margin 设置为auto。

.Button {
  margin: auto;
  width: 200px;
  height: 200px;
  background-color: white;
}

代码沙箱 => https://codesandbox.io/s/html-code-editor-forked-f17y2?file=/style.css

【讨论】：

@Jan-Jaap Bol，看看这个！！

【解决方案3】：

我删除了.Button 中的50px 右边距并使用#Buttons 中的gap 来设置元素的“最小装订线”间距：

#Buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 1em;
  align-items: center;
  text-align: center;
  min-height: 400px;
  margin: 0 auto !important;
  border: 1px solid blue;
}

.Button {
  width: 200px;
  height: 200px;
  background-color: white;
  border: 1px solid red;
}

<div id="Buttons">
  <div class="Button">A</div>
  <div class="Button">B</div>
  <div class="Button">C</div>
</div>

【讨论】：