aligning the two buttons on the center of screen using padding

Question

I have two buttons in my code and wondering how can I move them to the center of the screen using CSS.I tried playing around with the padding: 10px 24px 24px 30px; but it doesn't seem to be putting the two buttons at the center of the screen. Also, I want them to be responsive.

Here is my snippet:

/* .btn-group button {   */
    .btn-group-vertical button { 
      background-color: #0b0e0d; /* Black background */
      border: 1px solid rgb(239, 240, 239); /*  border */
      color: white; /* White text */
      padding: 10px 24px 24px 30px; /* Some padding top right bottom left */
      cursor: pointer; /* Pointer/hand icon */
      width: 50%; /* Set a width if needed */
      display: block; /* Make the buttons appear below each other */
      font-weight: bold;
      font-size: 14px;
      text-transform: uppercase;
      margin-bottom: 50px;
    }
    
    .btn-group button:not(:last-child) {   
      border-bottom: none; /* Prevent double borders */
    }
    
    /* Add a background color on hover */
    /* .btn-group button:hover { */
    .btn-group-vertical button:hover {    
      background-color: #ffffff; 
      color: #0b6d11;
    }

<div  >
        <div >
            <div class="btn-group-vertical"> 
                    <button type="button" id = "stbButton " '">First Button</button>
                    <button type="button" id = "cdbButton"  >Second Button</button>
             </div> 
         </div>
      </div>

score 1 · Accepted Answer · answered Sep 21 '21 at 00:19

Use display:flex in your container, then align and justify your elements to the centre. Setting flex-container to column will stack your elements on top of each other.

Setting the height to 100vh will make the container fill the height of the viewport, and your content will be vertically centred within it:

.btn-group-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
  height:100vh;
}


/* .btn-group button {   */

.btn-group-vertical button {
  background-color: #0b0e0d;
  /* Black background */
  border: 1px solid rgb(239, 240, 239);
  /*  border */
  color: white;
  /* White text */
  padding: 10px 24px 24px 30px;
  /* Some padding top right bottom left */
  cursor: pointer;
  /* Pointer/hand icon */
  width: 50%;
  max-width:300px; /* set a maximum width if you fancy */
  /* Set a width if needed */
  display: block;
  /* Make the buttons appear below each other */
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 50px;
}

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


/* Add a background color on hover */


/* .btn-group button:hover { */

.btn-group-vertical button:hover {
  background-color: #ffffff;
  color: #0b6d11;
}

<div class="btn-group-vertical">
  <button type="button" id="stbButton">First Button</button>
  <button type="button" id="cdbButton">Second Button</button>
</div>

score 0 · Answer 2 · answered Sep 21 '21 at 00:10

0

Add margin: auto to the btn-group-vertical class. It will get positioned in the center and be responsive as well.

answered Sep 21 '21 at 00:10

Nishant Bhosale

251
1
12

Thanks.That is putting at the center and top. How to put both the buttons at the center of the screen? Also, that seems to be disturbing `margin-botton:50px` – Tan Sep 21 '21 at 00:13

aligning the two buttons on the center of screen using padding

2 Answers2