元素不居中

Question

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

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

可能是这样的： Photo Problem 2.

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

#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.

Answer 1

将 margin 设置为 auto。

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

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

Answer 2

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

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

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

Edit/note：我为下面的代码片段缩小了按钮，以不扩展代码片段的宽度 window。

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

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

Answer 4

我遇到了类似的问题。我让按钮居中，然后在重新打开时，按钮左对齐，即使我没有做任何更改。 display:flex;关键字解决了问题。

元素不居中

Elements Not Centering

html

css

flexbox

centering