how do I place 2 buttons on top of each other while keeping them centered?

Issue

I would like to put 2 buttons on top of each other while still keeping both of them centered. I managed to put them on top of each other through the display: block, and through the flex-direction: column. However, I still don't know how to center them. The text-align doesn't seem to work. could somebody explain to me why this doesn't work, please?

button{
    border: none;
    padding-top: 10px;
    padding-bottom: 10px ;
    color: white;
    font-weight: bold;
    width: 200px;
    margin-bottom: 5px;
    border-radius: 5px;
}

.btn-group{
    display: flex;
    flex-direction: column;
    text-align: center;
}



#increment-btn{
    background: darkred;
}

#save-btn{
    background-color: green;
}

This is the HTML:

<div class="btn-group">
        <button id="save-btn" onclick="save()">SAVE</button>
        <button id="increment-btn" onclick="increment()">INCREMENT</button>
    </div>

Solution

You may use align-items: center; , it is a flex-direction: column;, so it will be align on the horizontal axis :)

button {
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  font-weight: bold;
  width: 200px;
  margin-bottom: 5px;
  border-radius: 5px;
}

.btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#increment-btn {
  background: darkred;
}

#save-btn {
  background-color: green;
}

<div class="btn-group">
  <button id="save-btn" onclick="save()">SAVE</button>
  <button id="increment-btn" onclick="increment()">INCREMENT</button>
</div>

Aside, flex or grid children do not really need to be reset to block if it is an inline element , they become part(cells) of the generated grid . (float is also ignored)

Answered By - G-Cyrillus