我試圖在一個div中居中對齊10個按鈕。

當按鈕形成新一行時，它們之間的間距變得不均勻。

.r-btn {
  border-radius: 5%;
  padding: 5px;
  margin: 1px;
  width: 149px;
  height: 79px;
  font-size: 10px;
  font-weight: 700;
  border: none;
  color: white;
}

.r-btn:hover .r-btn:focus {
  transition: 0.8s;
  transform: scale(1.2);
}

<div style="text-align:center; width:50%;">

  <a href="#"><button class="r-btn" style="background:#46a7a2">Right to Freedom from Segregation</button></a>

  <button class="r-btn" style="background:#c6d9df">Right to Life and Personal Liberty</button>

  <button class="r-btn" style="background:#e7a564">Right to Fair Access to Justice</button>

  <button class="r-btn" style="background:#b17431">Right to Livelihood and Social Security</button>

  <button class="r-btn" style="background:#c25469">Freedom of Speech and Expression</button>

  <button class="r-btn" style="background:#b17431">Right to Education</button>

  <button class="r-btn" style="background:#8bae7c">Right to Marriage</button>

  <button class="r-btn" style="background:#353a29">Right to Health</button>

  <button class="r-btn" style="background:#f1aab2">Freedom of Speech, Expression, and Religion</button>

  <button class="r-btn" style="background:#eae1a9">Right Against Torture and Degrading Treatement</button>

</div>

可以用flexbox。以下是您的代碼的更新版本:

CSS代碼:

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 50%;
  }

  .r-btn {
    border-radius: 5%;
    padding: 5px;
    margin: 1px;
    width: 149px;
    height: 79px;
    font-size: 10px;
    font-weight: 700;
    border: none;
    color: white;
  }

  .r-btn:hover,
  .r-btn:focus {
    transition: 0.8s;
    transform: scale(1.2);
  }

Html代碼:

<div class="container">
  <a href="#"><button class="r-btn" style="background:#46a7a2">Right to Freedom from Segregation</button></a>
  <button class="r-btn" style="background:#c6d9df">Right to Life and Personal Liberty</button>
  <button class="r-btn" style="background:#e7a564">Right to Fair Access to Justice</button>
  <button class="r-btn" style="background:#b17431">Right to Livelihood and Social Security</button>
  <button class="r-btn" style="background:#c25469">Freedom of Speech and Expression</button>
  <button class="r-btn" style="background:#b17431">Right to Education</button>
  <button class="r-btn" style="background:#8bae7c">Right to Marriage</button>
  <button class="r-btn" style="background:#353a29">Right to Health</button>
  <button class="r-btn" style="background:#f1aab2">Freedom of Speech, Expression, and Religion</button>
  <button class="r-btn" style="background:#eae1a9">Right Against Torture and Degrading Treatment</button>
</div>

您可以使用flexbox以下代碼:

Div.parent {
      Display: flex;
      Justify-content: center;
      Gap: 16px;
      Align-items: center;
      Flex-wrap: wrap;
    }

這是你的預期產出嗎？我使用wrap使div變得更小。

.r-btn {
  border-radius: 5%;
  padding: 5px;
  margin: 1px;
  width: 149px;
  height: 79px;
  font-size: 10px;
  font-weight: 700;
  border: none;
  color: white;
}

.r-btn:hover .r-btn:focus {
  transition: 0.8s;
  transform: scale(1.2);
}

.chngStyle{
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

<div class="chngStyle" style="text-align:center; width:50%;">

  <a href="#"><button class="r-btn" style="background:#46a7a2">Right to Freedom from Segregation</button></a>

  <button class="r-btn" style="background:#c6d9df">Right to Life and Personal Liberty</button>

  <button class="r-btn" style="background:#e7a564">Right to Fair Access to Justice</button>

  <button class="r-btn" style="background:#b17431">Right to Livelihood and Social Security</button>

  <button class="r-btn" style="background:#c25469">Freedom of Speech and Expression</button>

  <button class="r-btn" style="background:#b17431">Right to Education</button>

  <button class="r-btn" style="background:#8bae7c">Right to Marriage</button>

  <button class="r-btn" style="background:#353a29">Right to Health</button>

  <button class="r-btn" style="background:#f1aab2">Freedom of Speech, Expression, and Religion</button>

  <button class="r-btn" style="background:#eae1a9">Right Against Torture and Degrading Treatement</button>

</div>

div {
display: flex;
justify-content: center;
flex-direction: column;
align-items:center;
width: 100%;
gap:6px;
}
a {
display:block;
}
div > a,button {
 width: 300px;
 height: 60px
}

<div>

  <a href="#"><button class="r-btn" style="background:#46a7a2">Right to Freedom from Segregation</button></a>

  <button class="r-btn" style="background:#c6d9df">Right to Life and Personal Liberty</button>

  <button class="r-btn" style="background:#e7a564">Right to Fair Access to Justice</button>

  <button class="r-btn" style="background:#b17431">Right to Livelihood and Social Security</button>

  <button class="r-btn" style="background:#c25469">Freedom of Speech and Expression</button>

  <button class="r-btn" style="background:#b17431">Right to Education</button>

  <button class="r-btn" style="background:#8bae7c">Right to Marriage</button>

  <button class="r-btn" style="background:#353a29">Right to Health</button>

  <button class="r-btn" style="background:#f1aab2">Freedom of Speech, Expression, and Religion</button>

  <button class="r-btn" style="background:#eae1a9">Right Against Torture and Degrading Treatement</button>

</div>