Question 172493 in Html Question posted in
Some basic documentation can be found here.

How do I center align buttons in a div in HTML?

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?

Tags:

4

Answers


  1. 0

    You can use flexbox following code:

        Div.parent {
      Display: flex;
      Justify-content: center;
      Gap: 16px;
      Align-items: center;
      Flex-wrap: wrap;
    }
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0 
    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search