居中一些按钮

Question

我是一个初级前端开发人员，我用我的 css 样式表做了一些事情，无论我做什么，我似乎都无法让我的页面上的按钮像计算器一样对齐？我知道你们很多人都知道这一点，谢谢你的帮助。

.mainContent button {
  font-family: inherit;
  padding: 1em 2em;
  border: 3px solid black;
  width: 2em;
  background-color: #edf2fb;
  color: black;
  border-radius: 0.35em;
  font-size: 1.2em;
  margin: 0.1em auto;
  display: flex;
  justify-content: center;
}

<section class="mainContent">
  <button id="result">Result</button>
  <button id="clear">C</button>
  <button id="one">1</button>
  <button id="two">2</button>
  <button id="three">3</button>
  <button id="four">4</button>
  <button id="five">5</button>
  <button id="six">6</button>
  <button id="seven">7</button>
  <button id="eight">8</button>
  <button id="nine">9</button>
  <button id="zero">0</button>
  <button id="plus">+</button>
  <button id="minus">-</button>
  <button id="multiply">*</button>
  <button id="divide">/</button>
  <button id="equal">=</button>
  <button id="comma">,</button>
  <input type="text" placeholder="Your calculations">
</section>

你是怎么做到的？他们只是在中间一字排开往下走！

我尝试了所有这些证明内容、文本对齐、网格的方法，但我似乎无法正常工作

Answer 1

试试这个

.mainContent {
  font-family: inherit;
  width: 400px;
  padding: 1em 2em;
  border: 3px solid black;
  background-color: #edf2fb;
  border-radius: 0.35em;
  font-size: 1.2em;
}

input {
  margin-bottom: 20px;
}

#buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Creates four columns with equal width */
  gap: 10px;
}

<section class="mainContent">
  <input type="text" placeholder="Your calculations">
  <div id='buttons'>
    <button id="result">Result</button>
    <button id="clear">C</button>
    <button id="one">1</button>
    <button id="two">2</button>
    <button id="three">3</button>
    <button id="four">4</button>
    <button id="five">5</button>
    <button id="six">6</button>
    <button id="seven">7</button>
    <button id="eight">8</button>
    <button id="nine">9</button>
    <button id="zero">0</button>
    <button id="plus">+</button>
    <button id="minus">-</button>
    <button id="multiply">*</button>
    <button id="divide">/</button>
    <button id="equal">=</button>
    <button id="comma">,</button>
  </div>
</section>