How to center buttons in a div

Question

Here is my CSS and HTML.

.btn-group button {
  border: 3px solid green;
  padding: 10px;
  background-color: #04AA6D;
  /* Green background */
  border: 1px solid green;
  /* Green border */
  color: white;
  /* White text */
  padding: 10px 24px;
  /* Some padding */
  cursor: pointer;
  /* Pointer/hand icon */
  float: left;
  /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}


/* Add a background color on hover */

.btn-group button:hover {
  background-color: #3e8e41;
}

<div class="btn-group">
  <button type="button" class="button1">Faucet</button>
  <button type="button" class="button2">About Nano/Faucet</button>
  <button type="button" class="button3">Donate</button>
</div>

Image Of Buttons

I want to center these buttons under the text in the screen's center! I have tried so many things nothing works for me.

It works without my css, but if I add my CSS I made it wont work. — Bugle TV, Jun 17 '22 at 06:54

score 1 · Answer 1 · answered Jun 17 '22 at 06:54

You want to use flex on .btn-group and make it take 100% of the width of the parent to stretch the div.

.btn-group {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: skyblue;
}

.btn-group button {
  border: 3px solid green;
  padding: 10px;
  background-color: #04AA6D;
  /* Green background */
  border: 1px solid green;
  /* Green border */
  color: white;
  /* White text */
  padding: 10px 24px;
  /* Some padding */
  cursor: pointer;
  /* Pointer/hand icon */
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}


/* Add a background color on hover */

.btn-group button:hover {
  background-color: #3e8e41;
}

<div class="btn-group">
  <button type="button" class="button1">Faucet</button>
  <button type="button" class="button2">About Nano/Faucet</button>
  <button type="button" class="button3">Donate</button>
</div>

This seemed to work for me! – Bugle TV Jun 17 '22 at 06:58 — Bugle TV, Jun 17 '22 at 06:58

score 0 · Answer 2 · answered Jun 17 '22 at 06:53

0

You can add to your css:

.btn-group{
  display:flex;
  justify-content:center;
}

It will look like this

answered Jun 17 '22 at 06:53

Tamir Abutbul

7,301
7
25
53

score 0 · Answer 3 · answered Jun 17 '22 at 06:54

You can use Flexbox

.btn-group {
  display:flex; 
  flex-direction: row; 
  justify-content:center; 
}
.btn-group button {

  border: 3px solid green;
  padding: 10px;
  background-color: #04AA6D; /* Green background */
  border: 1px solid green; /* Green border */
  color: white; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #3e8e41;
}

  <div class="btn-group">
    <button type="button" class="button1">Faucet</button>
    <button type="button" class="button2">About Nano/Faucet</button>
    <button type="button" class="button3">Donate</button>  
</div>

This also seemed to work for me! – Bugle TV Jun 17 '22 at 06:57 — Bugle TV, Jun 17 '22 at 06:57

score 0 · Answer 4 · answered Jun 17 '22 at 06:54

As easy as adding this rule to style the container using display:flex

.btn-group{
  display: flex; 
  justify-content: center;  
}

And this is the whole snippet:

.btn-group{
  display: flex; 
  justify-content: center;  
}

.btn-group button {
  border: 3px solid green;
  padding: 10px;
  background-color: #04AA6D; /* Green background */
  border: 1px solid green; /* Green border */
  color: white; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #3e8e41;
}

<div class="btn-group">
  <button type="button" class="button1">Faucet</button>
  <button type="button" class="button2">About Nano/Faucet</button>
  <button type="button" class="button3">Donate</button>  
</div>

please accept the answer arriving first... I see everyone just said more or less the same thing — Diego D, Jun 17 '22 at 07:01

score 0 · Answer 5 · answered Jun 17 '22 at 06:56

add .btn-group{display: table; margin: 0 auto;}

    .btn-group{display: table; margin: 0 auto;}

    .btn-group button {
      border: 3px solid green;
      padding: 10px;
      background-color: #04AA6D;
      /* Green background */
      border: 1px solid green;
      /* Green border */
      color: white;
      /* White text */
      padding: 10px 24px;
      /* Some padding */
      cursor: pointer;
      /* Pointer/hand icon */
      float: left;
      /* Float the buttons side by side */
    }

    .btn-group button:not(:last-child) {
      border-right: none;
      /* Prevent double borders */
    }


    /* Clear floats (clearfix hack) */

    .btn-group:after {
      content: "";
      clear: both;
      display: table;
    }


    /* Add a background color on hover */

    .btn-group button:hover {
      background-color: #3e8e41;
    }

    <div class="btn-group">
      <button type="button" class="button1">Faucet</button>
      <button type="button" class="button2">About Nano/Faucet</button>
      <button type="button" class="button3">Donate</button>
    </div>

score 0 · Answer 6 · edited Jun 17 '22 at 14:24

0

Please add the following CSS to your code. Display be flex then use Justify content center to get output.

.btn-group {
    position: relative;
    display: flex;
    vertical-align: middle;
    justify-content: center;
}

edited Jun 17 '22 at 14:24

Lee Taylor

7,761
16
33
49

answered Jun 17 '22 at 06:56

Rajiv Kumar

60
5

score 0 · Answer 7 · edited Jun 17 '22 at 13:52

Use Flex.

.btn-group {
  display: flex;
  justify-content: center;
}

.btn-group button {
  border: 3px solid green;
  padding: 10px;
  background-color: #04AA6D;
  /* Green background */
  border: 1px solid green;
  /* Green border */
  color: white;
  /* White text */
  padding: 10px 24px;
  /* Some padding */
  cursor: pointer;
  /* Pointer/hand icon */
  float: left;
  /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}


/* Add a background color on hover */

.btn-group button:hover {
  background-color: #3e8e41;
}

<div class="btn-group">
  <button type="button" class="button1">Faucet</button>
  <button type="button" class="button2">About Nano/Faucet</button>
  <button type="button" class="button3">Donate</button>
</div>

How to center buttons in a div

7 Answers7