-1

I am trying to center align 10 buttons in a div.

The space between the button gets uneven when they form a new row.

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

When I float them left the spacing gets fixed but they don't center align. What am I doing wrong? How do I fix this space issue?

Travis J
  • 81,153
  • 41
  • 202
  • 273
Vivek N
  • 1
  • 2
  • To center your container, use `margin: 0 auto` instead of `text-align: center`. As answers below have suggested, use `display: flex` to get this kind of layout. Much better than floating etc. – ralph.m May 20 '23 at 05:39

4 Answers4

1

You can use flexbox. Here's an updated version of your code:

CSS code:

  .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 code:

<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>
Tawhid Monowar
  • 126
  • 1
  • 6
0

You can use flexbox following code:

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

Is this your expected output? I use wrap so that the div will get smaller.

.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>
Awoooooooooooooooooooo
  • 157
  • 9
-1

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>
Ronnie Royston
  • 16,778
  • 6
  • 77
  • 91